Day 16 - 用 useReducer 取代 Redux !?

如果有错误，欢迎留言指教~ Q_Q

useReducer 看起来跟 Redux 的 reducer 很像欸！那他能够取代 Redux 吗？

先回忆一下 Redux

Redux 是一个用来管理 State 的 library

Flux、Vuex、MobX 等等也都是常见管理 state 的library

~~现在还有个 XState !~~

当状态逻辑在画面里越长越大时，就该把他们拆开了！

Component → 处理UI画面
Redux → 处理状态资料

这样维护和重用性也都能够提高，未来的自己要看的时候，也清楚很多

Redux 用法

Redux 有 Reducer、Store、provider

Reducer → 保存 state，当接收到 action 时，要对 state 做动作的函数。可以区分很多类型~ 再给 Store 统一管理
Store → 管理 Reducer 的地方，负责整合所有的 Reducer，一个专案只有一个，唯一
provider → 在最外层，且只有唯一一个：接收 store 给的资料後，再传递给内部的 component

建立 action 描述动作

一个描述要做什麽事情的 object，store.dispatch() 把资讯传递到 store

建立 state 储存资料

一个简单的 object，且尽量让资料和 UI 状态分离。

const initialState = {
  id: '',
  text: action.text,
  completed: false
}

建立 Reducer，接收不同的 action，管理 state

reducer 是一个 pure function，它接收先前的 state 和一个 action，然後回传下一个 state。

(previousState, action) => newState

action 会传入现在 reducer 要对 state 做什麽动作的指令及额外的参数

action 可以区分很多类型~ 再给 Store 统一管理

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

在 default case 回传先前的 state。针对任何未知的 action 回传先前的 state

4.建立 store，并传入 Reducer

管理 Reducer 的地方，负责整合所有的 Reducer，一个专案只有一个，唯一！

使用 createStore 建立 store 并把 reducer 传进去

import { createStore } from 'redux'

const store = createStore(reducer)

provider

在最外层，且只有唯一一个：接收 store 给的资料後，再传递给内部的 component

用 Provider 将 store 根据需求将资料流进 component

react-redux

用 connect 把指定好的资料 state 和 component 连结起来

import { connect } from 'react-redux'

const mapStateToProps = state => ({
    name: state.name
})

// 把资料和元件 connent 後，就会得到一个新的 组件
const Title = connect(mapStateToProps)(ConnectTitle)