React-Redux笔记

在学习程墨大神的书:深入浅出React和Redux,写得非常好,墙裂推荐一波.配套代码库点击,开箱即用!

学到第三章React-Redux才想起做笔记,之前遇到的知识点,都把笔记写到了代码注释里,哎..本笔记只记录关键点.

React-redux提供的关键功能

Provider

1
2
3
4
5
6
7
8
9

// app等于jsx语法
const App = (
// 从此,提供者内部的组件都能获取store的内容
// 提供了连接功能
<Provider store={store}>
<TodoList />
</Provider>
)

connect:连接容器组件和傻瓜组件

关键代码:

1
export default connect(mapStateToProps, mapDispatchToProps) ( Counter);

在demo中,本来需要自己实现的容器组件CounterContainer,通过这种方式实现.

让Counter组件和store做连接!原因在于,外部提供了Provider!

谨记:

容器组件的工作无外乎把store上的状态转化为内层傻瓜组件的prop;把傻瓜组件中的action dispatch给store

上面代码用到了两个参数,需要我自己实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function mapStateToProps(state, ownProps) {
return {
value: state[ownProps.caption]
}
}

function mapDispatchToProps(dispatch, ownProps) {
return {
onIncrement: () => {
dispatch(Actions.increment(ownProps.caption));
},
onDecrement: () => {
dispatch(Actions.decrement(ownProps.caption));
}
}
}

何解?

他山之石

mapStateToProps(state, ownProps) 方法允许我们将store中的数据作为props绑定到组件中,只要store更新了就会调用mapStateToProps方法,mapStateToProps返回的结果必须是object对象,该对象中的值将会更新到组件中

自己的理解待续,先做出来,再去问为什么!

Provider:提供包含Store的context

react-redux要求provider的store属性必须是object,并且:必须包含如下三个函数

  • subscribe
  • dispatch
  • getState

拥有上述三个函数的对象,才能称为一个redux的store.
从此,我们不用自己实现provider,而是直接从react-redux中导出即可.

另外, react-redux 定义了 Provider 的 componentWillReceiveProps 函数,在 React 组
件的生命周期中, componentWillReceiveProps 函数在每次重新渲染时都会调用到, reactredux 在 componentWillReceiveProps 函数中会检查这一次渲染时代表 store 的 prop 和上
一次的是否一样。 如果不一样,就会给出警告,这样做是为了避免多次渲染用了不同的
Redux Store 。 每个 Redux 应用只能有一个 Redux Store ,在整个 Redux 的生命周期中都
应该保持 Store 的唯一性 。