react-redux基本使用思考

Time: 2019-08-18

Provider组件与connect方法

import React from "react";
import ReactDOM from "react-dom";

import { Provider } from "react-redux";
import store from "./store";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
);

Provider组件使得应用可在全局访问store。

connect方法

将组件与store联系起来，不用setState触发组件更新。

Action

action是把数据从应用传到store的有效载荷。是store数据的唯一来源。

一般传递action的方式：

store.dispatch()

action用于描述发生了什么，使用reducers来按照action更新state，store是联系三者的对象。

Store

职责：

• 维持应用的 state；
• 提供 getState() 方法获取 state；
• 提供 dispatch(action) 方法更新 state；
• 通过 subscribe(listener) 注册监听器;
• 通过 subscribe(listener) 返回的函数注销监听器。

根据已有的reducer创建store。

通过combineReducers()将多个reducer合并为一个总的，然后用createStore(rootReducer)创建store。

createStore可以接收第二个参数，用于设置state的初始状态。

需要区分store的state和组件的状态。

Redux生命周期

• store.dispatch(action)

可以在任何地方调用 store.dispatch(action)，包括组件中、XHR 回调中、甚至定时器中。

• store调用传入的reducer函数，reducer函数接收两个参数，当前状态和action。

reducer是纯函数。

• 根reducer会合并多个子reducer的输出结果，形成单一的状态树，这个就是应用的下一个state。
• store.subscribe(listener)，所有订阅的监听器都会触发，获取当前状态：store.getState()

此时只是store的状态，为了更新UI，用store的状态数据来更新组件状态。

如果你使用了 React Redux 这类的绑定库，这时就应该调用 component.setState(newState) 来更新。

	展示组件	容器组件
作用	描述如何展现（骨架、样式）	描述如何运行（数据获取、状态更新）
直接使用 Redux	否	是
数据来源	props	监听 Redux state
数据修改	从 props 调用回调函数	向 Redux 派发 actions
调用方式	手动	通常由 React Redux 生成

容器组件

技术上讲，容器组件就是使用 store.subscribe() 从 Redux state 树中读取部分数据，并通过 props 来把这些数据提供给要渲染的组件。

可以手工来开发容器组件，但建议使用 React Redux 库的 connect() 方法来生成。

容器组件关注的是将表现层连接到数据。

表现层组件通过props获取数据。

当用户想将某个表现组件和数据相连时，可以将组件包裹到容器中。

Q: 容器中的数据如何获取？从store状态映射到组件，store是全局，通过上下文获取。

使用connect

使用 connect() 前，需要先定义 mapStateToProps 这个函数来指定如何把当前 Redux store state 映射到展示组件的 props 中。

容器组件的职责：

• 读取state
• 分发action

定义 mapDispatchToProps() 方法接收 dispatch() 方法并返回期望注入到展示组件的 props 中的回调方法。

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case 'SHOW_COMPLETED':
      return todos.filter(t => t.completed)
    case 'SHOW_ACTIVE':
      return todos.filter(t => !t.completed)
    case 'SHOW_ALL':
    default:
      return todos
  }
}

const mapStateToProps = state => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

const mapDispatchToProps = dispatch => {
  return {
    onTodoClick: id => {
      dispatch(toggleTodo(id))
    }
  }
}

这里的mapStateToProps和mapDispatchToProps名称可以自定义。

最后，使用 connect() 创建 VisibleTodoList，并传入这两个函数。

import { connect } from 'react-redux'

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList

从以下几个地方设定：

• 展示组件
• 容器组件
• reducers
• actions

初始状态写在reducers中，reducers会接收初始状态，并分发action。

容器组件会为组件绑定数据和回调函数，回调函数可以在组件的任何地方通过props.xx调用。

为什么传递函数给组件

使用store时，我们假定组件的状态全交给redux来管理了。那么，修改store会触发UI的重新渲染。所以容器组件需要将能够修改store的函数传递到组件，让组件在合适的情况下调用。

改变store的唯一方式是分发行为，所以mapDispatchToProps就是干这件事情：将分发行为的函数作为props传递给组件。

参考

http://cn.redux.js.org/

http://cn.redux.js.org/docs/basics/UsageWithReact.html

reduxPPT，非常好