react-redux实现React和Redux的连接
2017-07-12 本文已影响55人
sdcV
- 安装react-redux
npm install --save react-redux - 只需两步即可将Redux连接到React中
-
在所有组件的顶层使用Provider组件给整个程序提供store.
import { Provider } from 'react-redux';
....ReactDOM.render( <Provider store={store}> ... </Provider> )
-
-
使用connect()将 state 和 action创建的函数绑定到组件中
import Counter from ' ./components/Counter';//导入Reducer
import { connect } from 'react-redux';
import * as ActionCreators from './actions';//导入action
export default connect(
state => ({counter: state.counter}),
ActionCreators
)(Counter);第一个参数是参数state的函数，该函数返回的对象被合并到组件的props中。
第二个参数将所有的action创建函数传到了组件的同名属性（比如increment被传递到了props.increment）中，同时为每个action创建函数隐性绑定了dispatch方法，可直接通过props调用这些action创建函数，无需再使用dispatch来发起它们。
