依照惯例,开头先放出redux中文文档地址
前文讲了redux
的基础概念,这次学习一下redux
和react
的结合使用
React-Redux
说到redux
在react
中的使用,肯定绕不开react-redux
这个库。首先声明,在react
中使用redux
并非一定要用react-redux
,同样的redux
也不是只能为react
服务,它同样也支持vue
、Angular
、纯JS
等等。这里使用react-redux
更多的是考虑这已经算react
生态圈的最佳实践了。
connect()
react-redux
提供了connect()
方法。
连接 React 组件
与 Redux store
。
连接操作不会改变原来的组件,返回一个新的已与Redux store
连接的组件。
调用方法: connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])
讲解一下参数,基本都是顾名思义:
[mapStateToProps(state, {ownProps})](Function): 一个函数,返回一个对象,把store中的state传到UI组件上,也可以把容器组件自己的props传递过去
[mapDispatchToProps(dispatch, {ownProps}): dispatchProps)](Object or Function): 一个函数或对象,定义UI组件上的props和需要触发的Action之间的映射关系
<Provider>标签
定义完connect()
方法,想要生成容器组件
还需把state
传递给容器组件
(回顾一下上面的逻辑,UI组件
是我们自定义的,通过react-redux
提供的connect()
方法,我们已经把store
中的state
传给了UI组件
的props
,UI组件
中需要触发store
中state
变化的Action
函数也已经传入,但是我们只建立了这种连接关系,容器组件
的state
还没有定义)。<Provider>
标签作用就是通过react
组件的context
把store
中的state
直接传入。
例子:
ReactDOM.render(
<Provider store={store}>
<MyRootComponent />
</Provider>,
rootElement
)
至此,如果不考虑异步场景,我们应该已经可以在react
项目中使用redux
了
下面在create-react-app
脚手架上开始写一个简单的小例子:
- 初始化一个
react
项目,原始项目应该包含一个app首页
- 在此项目基础上安装
redux
/react-redux
/react-router
等包 - 创建state相关目录(此处
sagas
非必要,仅在后文处理异步场景示例中使用到)
- 在
actions
中创建action
例如:
在function mark({ payload: id }) { return { type: 'MARK ITEM', payload: id }; }
reducers
中创建reduce
例如:
合并const initialUi = { backgroundColor: false }; function markItem (state = initialUi, action) { let backgroundColor = state.backgroundColor; if (action.type === 'MARK ITEM') { backgroundColor = !backgroundColor; return backgroundColor; } return backgroundColor; } function ui (state = initialUi, action) { return { backgroundColor: markItem(state, action) } } export default ui;
reducer
在import { combineReducers } from 'redux'; const reducer = combineReducers({ ui }); export default reducer;
store
中创建store
在import { createStore, applyMiddleware } from 'redux'; const store = createStore( reducer ); export default store;
container
组件中把组件属性和store
相连
在import React, { Component } from 'react'; import { connect } from 'react-redux'; import { mark } from '../state/actions/ui'; class example extends Component { constructor() { super(); } render () { console.log(this.props) return ( <div> { this.props.ui.backgroundColor } <ul> <li key={0} onClick={() => this.props.markItem(0)}>0</li> <li key={1} onClick={() => this.props.markItem(1)}>1</li> <li key={2} onClick={() => this.props.markItem(2)}>2</li> </ul> </div> ); } } const mapStateToProps = (state) => { return { ui: state.ui } }; const mapDispatchToProps = (dispatch) => { return { markItem: id => { dispatch(mark({ payload: id })); } }; }; const Example = connect( mapStateToProps, mapDispatchToProps )(example);
App
中添加组件,同时引入react-router
在class App extends Component { render() { return ( <div> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h1 className="App-title">Welcome to React</h1> </header> <Router> ... <Route path="/example" component={Example}/> </div> </Router> </div> ); } }
index.js
中通过<Provider>
组件传入store
... import { Provider } from 'react-redux'; import store from './state/store/store'; import App from './App'; ... ReactDOM.render( <Provider store={ store }> <App /> </Provider>, document.getElementById('root') );
(这里介绍一个调试redux
的小工具Redux DevTools,是一个中间件,使用方式可以自己看链接)
这就完成了把目前所有redux
和react
相关内容串联起来的小例子
(未完待续。。。)