Redux
在React 中使用Redux
在
容器组件 | 展示组件 | |
---|---|---|
位置 | 最顶层,路由处理 | 中间和子组件 |
使用 |
是 | 否 |
读取数据 | 从 |
从 |
修改数据 | 向 |
从 |
组件数据流
我们用
export default class Counter extends Component {
render() {
return <button onClick={this.props.onIncrement}>{this.props.value}</button>;
}
}
// 哪些 Redux 全局的 state 是我们组件想要通过 props 获取的?
function mapStateToProps(state) {
return {
value: state.counter,
};
}
// 哪些 action 创建函数是我们想要通过 props 获取的?
function mapDispatchToProps(dispatch) {
return {
onIncrement: () => dispatch(increment()),
};
}
/**或者也可以使用bindActionCreators
//将Dispatch映射为Props
...
import * as CounterActions from "../actions/counter";
...
function mapDispatchToProps(dispatch) {
return bindActionCreators(CounterActions, dispatch)
}
**/
// 你可以传递一个对象,而不是定义一个 `mapDispatchToProps`:
// export default connect(mapStateToProps, CounterActionCreators)(Counter);
// 或者如果你想省略 `mapDispatchToProps`,你可以通过传递一个 `dispatch` 作为一个 props:
// export default connect(mapStateToProps)(Counter);
let App = connect(mapStateToProps, mapDispatchToProps)(Counter);
const targetEl = document.getElementById("root");
const store = configureStore({ counter: 0 }); //初始化Store
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
targetEl
);
总结而言,各个部分的作用如下:
Provider & Store
<Provider store>
使组件层级中的<Provider>
中才能使用<Provider>
中,你可以把<Provider>
。
属性
store (Redux Store): 应用程序中唯一的Redux store 对象children (ReactElement) 组件层级的根组件。
connect:连接React 组件与Redux store 。
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options]);
连接操作不会改变原来的组件类,反而返回一个新的已与
mapStateToProps
mapStateToProps(state, [ownProps]): stateProps
mapDispatchToProps
mergeProps
mergeProps(stateProps, dispatchProps, ownProps): props
options
options 如果指定这个参数,可以定制
- pure = true
: 如果为true ,connector 将执行shouldComponentUpdate 并且浅对比mergeProps 的结果,避免不必要的更新,前提是当前组件是一个“纯”组件,它不依赖于任何的输入或state 而只依赖于props 和Redux store 的state 。默认值为true 。 - withRef = false
: 如果为true ,connector 会保存一个对被包装组件实例的引用,该引用通过getWrappedInstance() 方法获得。默认值为false
Links
- https://mp.weixin.qq.com/s/axauH4xpq-ZV3FFHI9XWLg 动手实现一个
react-redux