浅析react-redux

react-redux是react官方用来绑定redux的一个库，不同于直接在react中使用redux，使用了react-redux不再需要使用props在组件中层层传递了。

安装

yarn add react-redux

在react-redux中，我们只需要将某个范围用Provider包裹起来，就可以在该范围内的任意组件中使用store。

下面，让我们来了解一下react-redux的基本使用方法。

1. 创建store，reducer

import {createStore} from 'redux'
import {Provider} from "react-redux"

const reducer = (state,action) => {
	state = state || { n : 0 }
    switch (action.type) {
      case 'add':
        return {n:state.n + action.payload}
      default :
        return state
    }
}

const store = redux.createStore(reducer)

2. 使用provider将范围包裹起来

const render = () => {
  ReactDOM.render(
    <Provider store={store}>
      <App/>
    </Provider>
    , document.querySelector('#root'))
}

3. 需要一个函数，将state放到props上

const mapStateToProps = (state) => {
	return {
    	n : state.n
    }
}

4. 需要一个对象，调用action

const mapDispatchToProps = {
	add1 : () => dispatch({ type : 'add', payload : 1 })
}

5. 通过connect将redux和react组件结合起来

export default connect(mapStateToProps,mapDispatchToProps)(App)