Redux学习笔记-----基础部分

Redux的基本原则

• 唯一数据源(应用的状态数据应该只存储在唯一的一个store上)；

• 保持状态只读（不能直接修改Store的状态，而是应该通过派发一个action对象来完成）
• 数据改变只能通过纯函数完成（函数的返回结果必须完全由参数state和action决定）

Action

Action是store数据的唯一来源。需使用store.dispatch()将所需的action传到store。Action是把服务器响应的数据或者用户输入的数据、和其他一些非View的数据传入store的有效载荷。Action实际上是JS的普通对象。示例：

｛
   type:"ADD_TODO", //type为必须的字段，值为字符串或存放字符串的变量
   text:"我是示例"
｝

　　

需要注意的是：应该尽可能的减少在action中传递的数据。

Action创建函数

Action创建函数只是简单的返回一个action。示例：

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

　　

Redux提供的bindActionCreators()可以自动把多个action创建函数绑定到dispatch()方法上。

Reducer

Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的，记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。

reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state。

(previousState, action) => newState

　　

永远不要在reducer里做这些操作：

• 修改传入参数；
• 执行有副作用的操作，如API请求和路由跳转；
• 调用非纯函数，如Data.now()或Math.random()；

reducer一定要保持纯净。只要传入参数相同，返回计算得到的下一个state就一定相同。没有特殊情况、没有副作用、没有API请求、没有变量修改，单纯执行计算

combinerReducers（）方法只是生成一个函数，这个函数用来调用你的一系列reducer，每个reducer根据他们的key来筛选出state中的一部分数据并处理，然后这个生成的函数再将所有reducer的结果合成一个大的对象。

//ES6的写法
import { combineReducers } from 'redux'
import * as reducers from './reducers'

const todoApp = combineReducers(reducers)

Store

Store的职责：

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

Redux 应用只有一个单一的 store

store的使用示例：

//创建store
let store = createStore(todoApp);
//打印初始状态
console.log("初始状态======》",store.getState());

//每次state更新时，打印日志
//注意subscribe()返回一个函数用来注销监听器
const unsubscribe = store.subscribe(()=>console.log("state有更新=======》",store.getState()))

//发起一系列action
store.dispatch(addTodo("learn about actions"));
store.dispatch(addTodo("learn about reducers"));
store.dispatch(addTodo("learn about store"));
store.dispatch(toggleTdo(0));
store.dispatch(toggleTdo(1));
store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED));

//停止监听
unsubscribe();

数据流

Redux应用中数据的生命周期遵循4个步骤：

1. 调用  store.dispatch(action) 。 action 就是一个描述“发生了什么”的普遍对象，可将其理解为通过 store.dispatch 来告诉reducer发生了什么
2. Redux store调用传入的reducer函数。根据传入的action.type来更新state
3. 根reducer应该把多个子reducer输出合并成一个单一的state树。可使用原生的 combineReducers() 辅助函数，也可自己实现
4. Redux store保存了根reducer返回的完整的state树

React-Redux

connect()：生成容器组件；

mapStateToProps()：指定如何把当前Redux Store state映射到展示组件的props中。示例：

//VisibleTodoList 需要计算传到 TodoList 中的 todos，
//所以定义了根据 state.visibilityFilter 来过滤 state.todos 的方法，并在 mapStateToProps 中使用

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)
  }
}

　　

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

//VisibleTodoList 向 TodoList 组件中注入一个叫 onTodoClick 的 props ，
//并且onTodoClick 能分发 TOGGLE_TODO 这个 action

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

Redux的整体流程：

1. 将action传入dispatch()来触发reducer
2. reducer响应action，并根据action.type来处理旧的state数据，然后返回新的state数据，将新的state数据发送到store
3. store保存reducer返回的新的state，然后所有订阅  store.subscribe(listener)  的监听器都将被调用,以此来创建容器组件.（在react-redux中我们使用connect()方法来生成，所以不用手写 store.subscribe()  来生成容器组件）