Redux

Redux
Categories:
Tags:

核心概念（core concepts）

  • 资料（state）：一个物件，包含所有的资料状态。
    • Globalized State
  • 动作（action）：一个物件，用来描述对资料要进行什麽样的操作。
    • Increment
  • reducer：一个函式，根 action 的描述对原有的资料进行变更。
  • Dispatch

三个原则（three principles）

  • Single source of truth：整个 App 的资料状态（state）都保存在单一的物件中，这个保存所有资料的物件称作 store。
  • State is read-only：要改变资料状态的唯一方式就是透过 action。
  • Change are made with pure functions：reducers 是一个单纯的函式，它会根据 action 和原有的 state，再不变更原有 state 的情况下回传新的 state。

Store

  • 会拥有整个 App 的 state，在 Redux 中总是只会有一个 store，但可以有多可 reducer。
  • 当 state 有更新时，store 会通知有订阅的 container 有新的 state。
  • 透过 getState() 可以取得 state 的资料。
  • 透过 dispatch(action) 可以更新 state 的资料。
  • 透过 subscribe(listener) 可以註册监听事件。

缺点

  • 共享单一Data Store
    • 在取 state/action 名的时候都要格外小心 naming collision
  • 额外的学习门槛，环境设定，也很难让人马上上手。

实作

  • 每个 action 一定是个物件，且要包含 type 属性，其他选择性的属性包含 error, payload, meta，任何其他名称的属性都是不被允许的。
  • reducer 一定要是 pure function，也就是要回传新的 state（immutable）
  • 不要在裡面呼叫 API，这些不允许的行为都应该在 store.dispatch(action) 之前处理。
  • 所有的 reducer 都会接收到 action，并回传 state，这个资料状态有可能是新的或旧的。
npm install redux react-redux

import {createStore} from 'redux';

const increment = () => {
  return {
    type: 'INCREMENT'
  }
}

const counter = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
      break;
    default:

  }
}


let store = createStore(counter);

store.subscribe(()=>console.log(store.getState()));
store.dispatch(increment());

import {createStore} from 'redux';
import {Provider} from 'react-redux';

const store = createStore(allReducer);

ReactDOM.render(
  <Providor store="store">
    <App />
  </Providor>

);

import {useSelector, useDispatch} from 'react-redux';
import { increment } from './actions'

const counter = useSelector(state => state.counter)
const isLogged = useSelector(state => state.isLogged)
const dispatch = useDispatch();


return (
  <button onClick={() => dispatch(increment())}}>
  +
  </button>
)

参考资料

2021

教学影片

2022

2019