Redux学习总结

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 的描述进行具体的数据操作,一般获得两个参数StateAction,一般根据 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