一般来说，描述一个state通常通过一个普通的js对象来描述。比如说角色列表模块的state:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  accounts:[
    {
      id: 1,
      name: 'John',
      enable: true
    },{
      id: 2,
      name: 'Bob',
      enable: true
    },{
      id: 3,
      name: 'Lina',
      enable: false
    }
  ],
  subscription: '管理员'
}

这样写就处于写死的状态，没有任何修改器方法（setter）可以去修改它，对于界面简单，逻辑不复杂的应用没有什么问题，但是对于复杂且庞大的应用，就会出现状态逻辑混乱，难以维护的问题。那么，我们要想更新state，就要发起一个action，这里的Action也是一个普通的js对象，只是用来描述发生了什么，注意这里仅仅是描述。比如：

1
2
3
{type: "MODIFY_SUBSCRIPT", text: "用户"}
{type: "MODIFY_ACCOUNT", data: {id: 2, name: 'Toy'}}
{type: "ADD_ACCOUNT", data: {name: 'Lisa', enable: true}}

最后，为了把state和action联系起来，需要开发一些函数，函数接受state和action，这些函数就是reducer，并返回新的state。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function changeText(state='管理员', action){
  if(action.type = "MODIFY_SUBSCRIPT"){
    state.subscription = action.text
    return state
  }else{
    return state
  }
}

function accounts(state=[], action){
  switch(action.type){
    case 'ADD_ACCOUNT':
      return state.contact([id: 4, name: action.data.name, enable: action.data.enable])
    case 'MODIFY_ACCOUNT':
      return state.map((v, i)=>{
        if(v.id === action.data.id){
          v.name = action.data.name
          v.enable = action.data.enable || true
        }
      })
      
    default:
      return state
  }
}

再使用一个全局reducer来管理调用这些reducer。

1
2
3
4
5
6
function globalReducer(state = {}, action){
  return{
    changeText: changeText(state.subscription, action),
    accounts: accounts(state.accounts, action)
  }
}

以上就是Redux的核心概念，可以看出，Redux没有使用那些晦涩难懂的东西，90%都是纯javascript代码。