如何使用react-redux—

概述

之前看redux官方文档真是看得一脸懵逼，现在自认为会用了，于是来总结一下用法，供以后开发时参考，相信对其他人也有用。

不得不说，用了redux之后感觉挺爽的，有如下优点：

组件大多是函数组件非常方便测试。
免去了一层层传递props的困扰，如果想要数据，直接建一个容器组件即可，不需要对原组件做任何改动。
扩展性很强，有新动作的时候，只需在action.js里面添加，然后在reducer.js里面注册即可。

index.js

首先把index.js改成下面这个样子，用一个有store属性的Provider包裹。

import React from 'react'

import { render } from 'react-dom'

import { Provider } from 'react-redux'

import { createStore } from 'redux'

import todoApp from './reducers'

import App from './components/App'



const store = createStore(todoApp)



render(

  <Provider store={store}>

    <App />

  </Provider>,

  document.getElementById('root')

)

注意：以后添加路由，redux-thunk的时候也是在这里改。当规模大了的时候会独立出去一个root.js组件。

action.js

然后当然是注册动作了。

//有参数的动作

export const ADD_TODO = 'ADD_TODO'

export function addTodo(text) {

  return { type: ADD_TODO, id: todoId++, text}

}

//没有参数的动作

export const SHOW_ALL = 'SHOW_ALL'

export function showAll() {

  return { type: SHOW_ALL }

}

动作其实就是指令，告诉redux我需要进行某种改变。一般是没有参数的动作，不需要传递数据给store，另外一种是传递参数的动作，需要传递数据给store。

这里涉及到redux的一种理念，就是ui的改变不是通过各组件用它们的方法各自处理数据进行改变的，而是通过store处理数据，然后组件只负责渲染即可。这就是react是声明式框架而不是命令式框架的原因（各组件只是一种声明，并没有命令）。

reducer.js

注册动作之后，我们就有了指令了，但是store接收到了指令之后要怎么做？这就是reducer.js的功劳了。一般的reducer是类似下面这个样子的：

const post = (state = '无数据', action) => {

  switch(action.type) {

    case RECEIVE_POSTS:

      return action.title

    case RECEIVE_ING:

      return action.text

    case RECEIVE_ERROR:

      return action.error

    default:

      return state

  }

}

它有如下特点：

一个state的初始值。
一个switch处理action。
通过处理带参数或者不带参数的action，返回新的state。

从store这个层面上来说，经过了reducer之后，里面的数据得到了更新，做出了响应，它的任务全部完成了。但是从组件这个层面来说，它却又要处理这3个问题：

它如何拿到store里面的数据。
它如何发出指令（action）。
store数据的改变怎么导致它的重新渲染。

这三个问题利用容器可以解决。

container.js

容器就是组件和store之间的中介。为什么需要容器？因为关注点分离的思想，在组件层面，我们只关注怎么渲染的，在容器层面，我们只关注数据怎么传递的。

一般的容器需要拿到store的数据，并且发出指令（action），下面的一个一般的容器的写法：

const mapStateToProps = state => ({

  list: state

})

const mapDispatchToProps = dispatch => ({

  toggleState: (id) => dispatch(toggleState(id))

})

export default connect(

  mapStateToProps,

  mapDispatchToProps

)(TodoList)

这样，我们就解决了前2个问题。然后，由于我们把store里面的数据通过props传递给了组件，所以如果state的相关数据更新的话，传递给组件的props也会更新，于是组件重新渲染，这就解决了第三个问题。

有时候，我们并不需要传递store里面的数据进来，只需要发布几个命令即可，这个时候只需要把mapStateToProps换成null即可，示例如下：

const mapDispatchToProps = dispatch => ({

  addTodo: (text) => dispatch(addTodo(text))

})

export default connect(

  null,

  mapDispatchToProps

)(AddTodo)

组件

组件可以不作任何改动，只改成箭头函数就行了。如下所示：

import React from 'react'

const Posts = ({ title, nextText, nextPost }) => {

  return (

    <div>

      <span>{ title }</span>

      <button

        onClick={() => {

          nextText();

          nextPost();

        }}> next </button>

    </div>

  )

}

export default Posts