create-react-app的redux范例，通过useSelector获得state

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

本文接着分析create-react-app的redux范例，已经分析了相关函数需要定义成reducer的样式，而根据官方的提示，这些reducer又整合到了redux/toolkit的slice内。那么，如何随时随地的访问到state内的数据呢？这个就是本文要讨论的问题。

大家好，这里是苏南大叔的程序如此灵动博客，这里记录苏南大叔的代码故事。本文描述react和redux结合后，如何随时随地访问redux重新定义果的state的数据。测试环境：win10，node@16.14.2，create-react-app@5.0.1，reduxjs/toolkit@1.8.3，react-redux@8.0.2。

访问state(设置和获取)

这里还是沿用create-react-app的redux模版，基本情况参考文章：

• https://newsn.net/say/create-react-app-redux.html
• https://newsn.net/say/redux-slice.html

src/logic/slice.js定义：

export const counterSlice = createSlice({
  //...
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
  },
});
//...
export const selectCount = (state) => state.store_reducer_name.value;
export const getState = (state) => {
  return state.store_reducer_name;
}

这里定义了两个函数，一个是原版的selectCount()，另外一个是苏南大叔新加的getState()。都用于外部访问state使用。

{store中定义的reducer名字}来自store.js：

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './slice';
export const store = configureStore({
  reducer: {
    store_reducer_name: counterReducer,
  },
});

来自react的useState

useState函数不是redux提供的，是react本来就有的，有点意外不是？关于这个函数的说明见这里：

• https://newsn.net/say/react-usestate.html

简单的来说，useState函数就是定义了一个函数，同时又执行了这个函数，并把这个结果挂载到了state上面。大家都知道，在react里面，state的概念可是非常重要的。

const [incrementAmount, setIncrementAmount] = useState('2');

按照苏南大叔的理解，这句话的意思是：

const setIncrementAmount = (value) => {
  state.incrementAmount = value;
}
setIncrementAmount ("2");

来自redux的useSelector

正常来说，外部访问不了redux的state数据，但是凡事有例外。下面来看看如何访问到redux的state数据。

src/logic/slice.js定义【注意store_reducer_name】：

export const selectCount = (state) => state.store_reducer_name.value;
export const getState = (state) => state.store_reducer_name;

src/logic/store.js定义【store_reducer_name】：

export const store = configureStore({
  reducer: {
    store_reducer_name: counterReducer,
  },
});

src/view/counter.js调用：

import { useSelector, useDispatch } from 'react-redux';
import {
  selectCount,
  getState,
} from './../logic/slice';
const count = useSelector(selectCount);
const state = useSelector(getState);
console.log(count);
console.log(state);

这里的核心代码：

const selectCount = (state) => state.store_reducer_name.value;
const count = useSelector(selectCount);

苏南大叔的理解就是：

const count = state.store_reducer_name.value;

useSelector的只读性

在useSelector对应的函数中，

• redux的state是有命令空间的，来自于store中的定义。
• redux中的state是只读的，不可修改的。

比如：

export const getState = (state) => {
  return state.store_reducer_name;
}
const state = useSelector(getState);

试图改写已有属性的时候，会报错：

state.store_reducer_name.status="test"; 

Cannot assign to read only property 'status' of object '#<Object>'

试图添加新的属性的时候，会报错：

state.store_reducer_name.aaa="bbb"; 

Uncaught TypeError: Cannot add property aaa, object is not extensible

useStatevsuseSelector

userState里面的state，是react组件原生的state。和redux中的state不一样！redux的state在react里面，叫做selector。

• react中的state，指的是组件的状态数据。
• redux reducer中的state，指的是store中的数据。

以下截图来自react devtools：

相关文档

• https://newsn.net/say/redux.html
• https://newsn.net/say/react.html
• https://newsn.net/say/react-usestate.html

综述

本文中的大多数内容，都是苏南大叔自己的理解。不正确之处，请指正。

• https://newsn.net/tag/redux/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。