基本概念

  1. store
    • 存储数据的仓库
    • 使用 createStore 创建
  2. state
    • 数据的仓库当中存储的数据
    • 通过 store.getState() 获取 store 对应的快照
  3. action
    • 对象
    • 描述当前如何操作 state 对象的状态 ```jsx const addOne = { type: ‘ADD’, num: 1 }

const addTwo = { type: ‘ADD’, num: 2 }

const square = { type: ‘SQUARE’, }

  2. 4. dispatch
  3.    - 唯一能更改 state 的方法
  4.    - `store.dispatch(action)`
  5. 5. reducer
  6.    - 函数, 用来返回一个 state
  7.    - 所有 action 的行为通过 reducer 来中转
  8. ```jsx
  9. const reducer = (state = 10, action) => {
  10.     switch(action.type){
  11.     case 'ADD':
  12.       return state + action.num;
  13.     case 'SQUARE':
  14.       return state ** 2;
  15.     default: 
  16.       return state;
  17.   }
  18. }

操作示例

  1. import React from "react";
  2. import ReactDOM from "react-dom";
  4. import { createStore } from "redux";
  6. const addOne = {
  7.   type: "ADD",
  8.   num: 1,
  9. };
  11. const addTwo = {
  12.   type: "ADD",
  13.   num: 2,
  14. };
  16. const square = {
  17.   type: "SQUARE",
  18. };
  20. const reducer = (state = 10, action) => {
  21.   switch (action.type) {
  22.     case "ADD":
  23.       return state + action.num;
  24.     case "SQUARE":
  25.       return state ** 2;
  26.     default:
  27.       return state;
  28.   }
  29. };
  31. const store = createStore(reducer); 
  33. function App() {
  34.   return <div></div>;
  35. }
  37. ReactDOM.render(<App />, document.getElementById("root"));

使用 store.getState() 可以查看 state 的值

  1. console.log(store.getState()); // 10，因为在 reducer 中定义初始值

使用 store.dispatch() 更改 state 状态

  1. console.log(store.dispatch(addOne)); // {type: "ADD", num: 1} 返回 action 对象
  2. console.log(store.getState()); // 11 
  4. console.log(store.dispatch(addTwo)); // {type: "ADD", num: 2} 返回 action 对象
  5. console.log(store.getState()); // 13 
  7. console.log(store.dispatch(square)); // {type: "SQUARE"} 返回 action 对象
  8. console.log(store.getState()); // 169