使用connet或者手动关联react和redux

在正式项目当中我们一般是使用react-redux这个库提供的 Provider 和connect这两个库来关联react和redux，但是我们也可以使用手动关联，在学习过程当中不要求接近，理解最原始的方法更有助于我们学习和进步

手动关联

使用react来展示界面，使用redux的store来存储数据，在react当中使用store.getState() 来获取当前的数据，并且展示子啊界面上

初学者一般喜欢这样写(以计数器为例子，其他例子也一样):

const reducer = (preState = { value: 0 }, action) => { // 定义reducerswitch (action.type) {case 'incre':return { value: preState.value + action.value }case 'decre':return { value: preState.value - action.value }default:return preState}
}const store = createStore(reducer) // 根据reducers创建storeconst Counter = ({ // 定义一个组件value,onInCrement,
}) => {return (<div className="App">{value}<button onClick={onIncrement}> + </button></div>)
}
const render = () => {ReactDOM.render(<Counter value={store.getState().value} onInCrement={() => store.dispatch({ type: 'incre', value: 1})}/>,document.getElementById('root'))
}store.subscribe(render) // 当store当中的状态发生改变时， 触发render函数

在这个例子中每当store发生改变都会触发一次ReactDOM的render方法，下面来看一下该进的方法

const reducer = (preState = { value: 0 }, action) => {switch (action.type) {case 'incre':return { value: preState.value + action.value }case 'decre':return { value: preState.value - action.value }default:return preState}
}const store = createStore(reducer)const Counter = ({value,onInCrement,
}) => {return (<div className="App">{value}<button onClick={onIncrement}> + </button></div>)
}class App extends Component {constructor (props) {super(props)}componentDidMount () {this.unMount = store.subscribe(() => this.forceUpdate())}render() {return (<Counter value={store.getState().value} onInCrement={() => store.dispatch({ type: 'incre', value: 1})}/>)}}ReactDOM.render(<App />,document.getElementById('root'))

在改进的方法中，我们只在最开始的时候调用一次ReactDOM的render方法，我们把当store状态发生改变之后的监听绑定到react提供的一个主动触发更新的forceUpdate()方法，也就是调用一次forceUpdate就再刷新一次，我们刷新的时候store的状态已经改变了因此获取到的也是最新的数据

使用connet关联

const reducer = (preState = { value: 0 }, action) => {switch (action.type) {case 'incre':return { value: preState.value + action.value }case 'decre':return { value: preState.value - action.value }default:return preState}
}
const store = createStore(reducer)const App = ({value,onIncrement,
}) => {return (<div className="App">{value} <button onClick={onIncrement}> + </button></div>)
}
const mapStateToProps = (state) => ({ value: state.value })
const mapDispatchToProps = (dispatch) => ({onIncrement: () => {dispatch({type: 'incre',value: 1,})}
})
const AppContainer = connect(mapStateToProps, mapDispatchToProps)(App)ReactDOM.render(<Provider store={store}><AppContainer /></Provider>,document.getElementById('root'))

在上面我们定义了一个无状态组件，并且使用connet方法将App 和我们所需要的props连接起来，相当于我们使用connect把App需要的props传进去，而且相对于前面手动关联而言，我们不需要手动去触发react组件去刷新，使用connect之后，当store发生改变,props会跟着变，不需要我们手动刷新。

Provider

这个接受一个store参数，代表我们要绑定到组件的store，使用connect的时候我们需要在我们的组件的最外层套上Provider,这样connect才能够获取到store的数据

ReactDOM.render(<Provider store={store}><AppContainer /></Provider>,document.getElementById('root'))

connect

connect接受四个参数：[mapStateToProps], [mapDispatchToProps], [mergeProps], [options]，下面分别来介绍

mapStateToProps(state, ownProps)： (Function)

当这个参数被指定的时候，只要store的数据一更新，这个方法就会被调用，如果不需要可以传null或者undefined

其中state代表当前store的state,ownProps代表传递给组件的props

mapDispatchToProps(dispatch, ownProps)： (Object or Function)

当传递的是一个对象的时候

当传递的是一个function的时候，它接受一个dispatch 和 ownProps参数，如果指定了ownProps参数，每当被关联的组件收到新的Props的时候都会触发这个函数

如果不传递这个参数，那么会默认将dispatch注入到我们的组件当中

mergeProps(state, dispatchProps, ownProps)： (Function)

三个参数分别代表mapStateProps(),mapDispatchToProps()执行的结果和父组件的props, 如果不返回一个对象那么默认是将 Object.assign({}, ownProps, stateProps, dispatchProps) 将他们合并并且返回