React-redux基础学习

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。

一、React-redux概述

在我们使用 redux 的过程中，我们每次都得在需要的组件用进行 store 的引入，那有没有什么方便的方法呢？这时react-redux就帮助我们解决了~

如果你还没有学习过 redux ，请先看上一篇文章Redux基础学习。

React-redux是 Redux 的官方出的用于配合 React 绑定库。它能够使你的 React 组件从 Redux store 中读取数据，并且向 store 分发 actions 以更新数据。

他有两个重要的成员Provider和connect。

Provider 包裹在根组件的最外层，使所有的子组件都能够访问到 state ，接受 store 作为 props 。
connect Provider 内部组件想要访问到 state 就需要通过 connect进行一层封装。

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

通常mapStateToProps、mapDispatchToProps两个是我们常用的。

mapStateToProps(state, [ownProps]): stateProps 只要 Redux store 发生改变，mapStateToProps 函数就会被调用。该回调函数必须返回一个纯对象，这个对象会与组件的 props 合并。
mapDispatchToProps(dispatch, [ownProps]): dispatchProps 如果传递的是一个对象，那么每个定义在该对象的函数都将被当作 Redux action creator，对象所定义的方法名将作为属性名；每个方法将返回一个新的函数，函数中dispatch方法会将action creator的返回值作为参数执行。这些属性会被合并到组件的 props 中。

二、示例

我们在上一期得 redux 学习得基础上进行修改；state 中有一个 count ，初始值是 0 ，在 组件A 中有一个按钮，点击使 count 加 1，在 组件B 中显示这个 count 的值。

修改reducer.js

const initState = {
  value: '初始状态值',
  count: 0
}

export const reducer = (state = initState, action) => {
  switch(action.type) {
    case 'ADD':
      return {
        ...state,
        count: ++state.count
      }
    default:
      return state
  }
}

添加 组件A、组件B，在 App 中引入：

ComA.jsx：

import React from 'react'
import { connect } from 'react-redux'

const comA = (props) => {

  const handleClick = () => {
    props.addAction()
  }

  return (
    <button onClick={handleClick}>点击 + 1</button>
  )
}

const mapDispatchToProps = (dispatch) => {
  return {
    addAction: () => {
      dispatch({
        type: 'ADD'
      })
    }
  }
}

// 因为例子比较简单，这里组件只有点击事件，所以要传入connect第二个参数
export default connect(null, mapDispatchToProps)(comA)

ComB.jsx：

import React from 'react'
import { connect } from 'react-redux'

const comB = (props) => {
  return (
    <h1>{props.countNum}</h1>
  )
}

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

export default connect(mapStateToProps, null)(comB)

App.jsx:

import React from 'react';
import { Provider } from 'react-redux'
import store from './store'
import ComA from './components/comA'
import ComB from './components/comB'

const App = () => {
  return (
    <Provider store={store}>
      <ComB />
      <ComA />
    </Provider>
  )
}

export default App;

通过这个例子，其实我们可以这样理解：

mapDispatchToProps要返回一个对象，每个 key 都是一个 dispatch 的函数，然后将这些函数注册到当前 props 中，在需要执行 dispatch 的时候像上面例子一样调用。

mapStateToProps和 mapDispatchToProps 差不多，只不过是把 state 的属性注册到当前 props 中。