Day 25 Redux 介绍

第 25 天 !

我们知道 redux 结构 flux-like ，

那麽他的每个阶段是在处理什麽？

store

这是管理 redux 资料的地方，

但跟 flux 不一样的是，

在 redux 里，是不能直接设定 store，

必须去透过 reducer 返回的值来确定最後 store 保存的资料

action

当我们想要去操作 store 时，我们不能直接去更改它里面的资料，

我们必须去定义这个 action ，来告诉 reducer 应该怎麽样处理资料，

那 action 会是一个 plain object ，

但我们一定要在这个 object 里面有一个 type 参数，

这 type 会是一个字串，用来形容我们这个 action ，

再来，我们需要带入参数的话，

通常会增加一个 payload 参数来保存我们需要带入的数据，

加入我们有一个动作是一个登入，

那我们的 action 格式会是：

const loginAction = {
  type: 'LOGIN',
  payload: {
    account: 'test',
    password: '1234',
  },
};

action creator

action type 是常数，不变的，但是 payload 的数据会根据情境而产生一些差别，

我们可以定义一个 action creator 来让这个 action 可以重复利用，

action creator是一个 function ，会 return 一个 action

like:

function loginAction(account, password) {
  return {
    type: 'LOGIN',
    payload: {
      account,
      password,
    },
  };
}

到时候我们要使用这个 action ，我们就可以直接呼叫 loginAction ，就不需要一直去写 action 的格式了

dispatch

如果说我们是在 action 去定义资料操作的事件，

那又要如何去触发 store 的更新呢？

在 redux 里，只能用 dispatch ，

dispatch 的功用就是，去触发 store 的更新流程，

它唯一接收的是 action object，

并把 action object 带入到更新流程

dispatch({
  type: 'LOGIN',
  payload: {
    account: 'account',
    password: 'password',
  },
});

or with action creator :

dispatch(loginAction());

reducer

这是在 redux 里，最核心的一个部分，

它负责整合 store 跟从外部接收的资料，

return 的资料会由 store 保存

function reducer(state = initialState, { type, payload }) {
  switch (type) {
    case ACTION_TYPE:
      return { ...state, ...payload };
    default:
      return state;
  }
}

它会接收两个参数：

目前的 state
action 资料

那我们会由 action.type 来判断我们最终应该要如何保存的 state，

有几点需要注意的是：

在 reducer 无法使用非同步
我们应该是以 state & action 的资讯来组成新的 state，而不是还需要在额外引入数据
在 redux 判定资料的变化更新是用 immutable update 来判定，所以当我们在更新 state 的时候，要把state 复制并且更新该更新的部分