Redux 的学习心得，待修改

1.Action

Action 是一个 JS 对象，是对行为类型的一个描述或者是添加数据时的具体数据，或者删除数据是的数据项 id，比如：

1
2
3
4
5
6
···
{
  "type": "ADD_TODO",
  "text": "Back School"
}
···

一般需要一个叫做 actionCreator 的函数创建 action。比如：

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

2.Reducer

Reducer 就是根据 Action 的描述进行具体的数据操作，一般获得两个参数State和Action,一般根据 Type 的类型更新 State，一般不直接修改，而是返回新的 State。比如上面那条 Action:

1
2
3
4
5
6
7
8
9
10
···
case ADD_TODO:
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
···

combineReducers

这个函数用来管理各个分离的小 Reducer

3.Store

Stroe 就是整个应用存放数据的地方，一个应用只有一个 store。

  • store 可以维持应用的 state
  • 提供 getState() 方法获取 state
  • 通过 dispatch(action) 更新 state
  • 通过 subscribe(listener) 注册监听器
  • replaceReducer用来替换 store 当前用来处理 state 的 reducer

4.Redux 流程图

redux-process

5.react-redux

Provider

Provider 是一个 React 组件，作用是保存 store 给子组件中的 connect 使用

1
2
3
<Provider store={this.props.store}>
  <h1>hello world!</h1>
</Provider>

Connect

Connect 把 State 和 dispatch 转换成 props 传递给子组件。

mapStateToProps

mapDispatchToProps

bindActionCreators