Redux

三大原则

单一数据源

整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。

State 是只读的

唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

使用纯函数来执行修改

为了描述 action 如何改变 state tree ，你需要编写 reducers。
reducers是一些纯函数，接口当前state和action。只需要根据action，返回对应的state。而且必须要有返回。
一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用，我们就把这个函数叫做纯函数

核心概念

State

state 数据源初始值，其它的代码不能随意修改它，只能通过发起一个action去

{
  todos: [{
    text: 'Eat food',
    completed: true
  }, {
    text: 'Exercise',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}

Action

顾名思义，action就是动作，也就是通过动作来修改state的值。也是修改store的唯一途径。
action本质上就是一个普通js对象，我们约定这个对象必须有一个字段type，来表示我们的动作名称。一般我们会使用一个常量来表示type对应的值。
此外，我们还会把希望state变成什么样子的对应的值通过action传进来，那么这里action可能会类似这样子的

{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', count: 2 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

Reducer

action 就像是描述发生了什么的指示器。最终，为了把 action 和 state 串起来，开发一些函数，这就是 reducer。再次地，没有任何魔法，reducer 只是一个接收 state 和 action，并返回新的 state 的函数。 Reducer作为纯函数，内部不建议使用任何有副作用的操作，比如操作外部的变量，任何导致相同输入但输出却不一致的操作。

const  visibilityFilter = (state = 'SHOW_ALL', action) => {
  if (action.type === 'SET_VISIBILITY_FILTER') {
    return action.filter;
  } else {
    return state;
  }
}

const  todos = (state = [], action) => {
  switch (action.type) {
  case 'ADD_TODO':
    return state.concat([{ text: action.text, completed: false }]);
  case 'TOGGLE_TODO':
    return state.map((todo, index) =>
      action.index === index ?
        { text: todo.text, completed: !todo.completed } :
        todo
   )
  default:
    return state;
  }
}

Redux使用

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk'; //异步请求 需要thunk中间件
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

// redux 3个组成部分 action reducer state(store);

const countReducer = function(state = { count: 1 }, action) {
 switch(action.type) {
   case 'COUNT_ADD':
     return {
       ...state,
       count: state.count + 1
     }
   default:
     return state
 }
}

const postReducer = function(state = { list: [{ title: 'hello'}]}, action) {
 switch(action.type) {
   case 'LOAD_POSTS':
     return {
       ...state,
       list: action.payload
     }
   default:
     return state
 }
}

const rootReducers = combineReducers({
 count: countReducer,
 post: postReducer
})

const store = createStore(
 rootReducers,
 compose(
   applyMiddleware(...[thunk]), // 需要使用的中间件数组
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
 ),
); //创建一个store

console.log(store); // dispatch getState ...
console.log(store.getState()); // {count: 1}

// 如果需要改变一个reducer的值，需要使用dispatch派发一个action
// action需要2个参数 
//   type 通过type区分是对state做什么操作
//   payload 载荷 传递的数据（参数）

store.dispatch({
 type: 'COUNT_ADD',
 payload: {},
})  

// 异步时使用thunk中间件，第一个参数为dispatch方法，可以请求数据后在用参数dispatch做派发
store.dispatch(async(dispatch) => {
 let res = await fetch('url');

 dispatch({
   type: 'LOAD_POSTS',
   payload: res
 })
})

console.log(store.getState()); // {count: 2}

ReactDOM.render(, document.getElementById('root'));