第44节——redux store

一、概念

Redux 是一个用于管理 JavaScript 应用状态的库。在 Redux 中，整个应用的状态都存储在一个对象中，称为 store。

Store 实际上是一个 JavaScript 对象，它存储了整个应用的状态。它是唯一的，意味着应用中只有一个 store。每当状态发生变化，它会存储最新的状态。

使用 Redux 时，你可以通过调用 store.getState() 来获取当前应用的状态，通过调用 store.dispatch(action) 来更新应用的状态，其中 action 是一个描述发生了什么的对象。

总的来说，store 是 Redux 应用的核心部分，它存储了整个应用的状态，并提供了读取和更新状态的方法

二、定义store

创建一个store.js文件

import { createStore } from 'redux';

// 定义初始状态
const initialState = {
  count: 0
};

// 定义reducer
function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1
      };
    default:
      return state;
  }
}

// 使用createStore创建store
const store = createStore(reducer);

export default store
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
26
27
28
29

三、页面中获取store中定义的数据

import React from 'react';
import { useSelector } from 'react-redux';

function Counter() {
  /**
   * 使用useSelector这个钩子来获取store中的state
   * 接收一个回调函数，state就是我么你定义的state
   * 需要那个属性可以直接return对象的属性
   */
  const count = useSelector(state => state.count);
  return (
    

      
Count: {count}
    
  );
}

export default Counter;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

三、store常用的方法

1、store.getState

// 返回应用当前的 state。 它与 store 的最后一个 reducer 返回值相同。
store.getState()
1
2

2、store.dispatch

// dispatch action。这是触发 state 变化的惟一途径。

store.dispatch()
1
2
3

3、store.subscribe

添加一个变化监听器。每当 dispatch action 的时候就会执行，state 树中的一部分可能已经变化。你可以在回调函数里调用 getState() 来拿到当前 state。返回一个可以销毁监听的函数。

const unsubscribe = store.subscribe(handleChange)
1

三、模块化处理

1、combineReducers

使用combineReducers可以对redux进行模块化管理，在 Redux 中，你可以使用多个 Reducer 来处理不同的数据，然后使用 combineReducers 函数将它们合并起来。

2、创建user模块

创建user.js

const defaultState = {};

const userReducer = (state = defaultState, action) => {
  switch (action.type) {
    case "UPDATE_USER":
      return { ...state, ...action.payload };
    default:
      return state;
  }
};

export default userReducer;
1
2
3
4
5
6
7
8
9
10
11
12

3、在store.js中引入，并使用combineReducers合并

import { legacy_createStore as createStore, combineReducers } from "redux";
import user from "./user";

const rootReducer = combineReducers({
  // 知己诶使用es6的语法，那么这个模块的名字就是user
  user,
});

// 创建 store
const store = createStore(rootReducer);

// 导出 store
export default store;
1
2
3
4
5
6
7
8
9
10
11
12
13

4、页面中获取store

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function Counter() {
  /**
   * 使用useSelector这个钩子来获取store中的state
   * 接收一个回调函数，state就是我么你定义的state
   * 需要那个属性可以直接return对象的属性
   * 
   */
  // const count = useSelector(state => state.count);

  /**
   * 如果我们对redux分过模块
   * 那么我们使用state.user先找到对应的模块再去
   * 获取里面的属性
   */
  const state = useSelector((state) => state.user)

  return (
    

      
Name: {state.name}
    
  );
}

export default Counter;
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
26
27