react-redux 基础概念

结合官方提供的todo教程，以及我Get到的点(感觉没有Vuex那么操作简单易上手)~~传送门

三大 ( 核心 ) 概念：

 

• store 是应用的状态管理中心，保存着是应用的状态（state），当收到状态的更新时，会触发视觉组件进行更新。

• container 是视觉组件的容器，负责把传入的状态变量渲染成视觉组件，在浏览器显示出来。

• reducer 是动作(action)的处理中心， 负责处理各种动作并产生新的状态（state），返回给store。

1、connect()

React-redux提供connect方法，用于从UI组件生成容器组件。

import { connect } from 'react-redux'
const Visible = connect()(TodoList)

上面代码中，TodoList是一个UI组件，VisibleToDoList就是由React-redux通过connect方法自动生成的容器组件。

connect方法接收两个参数：mapStateToProps和mapDispatchToProps。他们定义了UI组件的业务逻辑。前者负责输入逻辑，即将state映射到UI组件的参数（props），后者负责输出逻辑，即将用户对UI组件的操作映射成Action。

2、mapStateToProps()

mapStateToProps是一个函数。它的作用是建立一个从(外部)state对象到(UI组件)props对象的映射关系。mapSateToProps会订阅Store，每当state更新的时候，就会自动执行，重新计算UI组件的参数，从而触发UI组件重新渲染。默认第一个参数为state，第二个为容器组件的props对象。

3、mapDispatchToProps()

mapDisPatchToProps是connect函数的第二个参数，用来建立UI组件的参数到store.dispatch方法的映射。也就是定义了哪些用户的操作当做Action，传给Store。

4、Provider 组件

connect方法生成容器组件以后，需要让容器组件拿到state对象，才能生成UI组件参数。React-redux 提供Provider组件，可以让容器组件拿到state。

import { Provider } from 'react-redux'
import { createStore } from 'redux'
...
let store = createStore(yourApp)
render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Provider在根组件外面包了一层，这样App的所有子组件默认都可以默认拿到state了。