7 redux 三大原则

单一数据源

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

console.log(store.getState())

 

/* 输出{

  visibilityFilter: 'SHOW_ALL',

  todos: [

    {

      text: 'Consider using Redux',

      completed: true,

    },

    {

      text: 'Keep all state in a single tree',

      completed: false

    }

  ]}*／

 

State 是只读的

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

store.dispatch({

  type: 'COMPLETE_TODO',

  index: 1})

 

store.dispatch({

  type: 'SET_VISIBILITY_FILTER',

  filter: 'SHOW_COMPLETED'})

 

使用纯函数来执行修改

想要改变state，你需要编写 reducers。

Reducer 只是一些纯函数（同样的输入参数就有同样的输出结果），它接收先前的 state 和 action，并返回新的 state。

function visibilityFilter(state = 'SHOW_ALL', action) {

  switch (action.type) {

    case 'SET_VISIBILITY_FILTER':

      return action.filter

    default:

      return state

  }

}

 

function todos(state = [], action) {

  switch (action.type) {

    case 'ADD_TODO':

      return [

        ...state,

        {

          text: action.text,

          completed: false

        }

      ]

    case 'COMPLETE_TODO':

      return state.map((todo, index) => {

        if (index === action.index) {

          return Object.assign({}, todo, {

            completed: true

          })

        }

        return todo

      })

    default:

      return state

  }

}

 

import { combineReducers, createStore } from 'redux'

let reducer = combineReducers({ visibilityFilter, todos })

let store = createStore(reducer)