前端

Redux-React

文章目录
  1. 1. 基础
    1. 1.1. action
    2. 1.2. reducer 规约器
    3. 1.3. store
  • action -> reducer -> store

基础

action

描述对state要发生什么？（为state的改变提供数据，数据的唯一来源）

1
2
3
4
{
    type: "ADD_TODO",
    text: 'build my family',  
}

  • Action Creater 动作创建函数

    1
    2
    3
    4
    5
    6
    function addTodo(text) {
        return {
            type: "ADD_TODO",
            text,
        }
    }

reducer 规约器

将actions描述的发生事情更新为state

(prevState, actions) => newState

1
2
3
4
5
6
7
8
function todoApp(state, action){
    if(actions.type === "SOME_FLAG"){
        return {
            ...state,
            action.newData,
        }
    }
}
  • combineReducer()

store

维持应用状态，提供dispatch(action)

1
2
3
let store = createStore(todoApp);
store = createStore(todoApp);
store.dispatch(addTodo("store"));
1
/../captainweekly/Weekly/resources/20200918/redux-in-chinese.pdf
  • 目标、方案、执行者