我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

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

苏南大叔:create-react-app的redux范例,通过useSelector获得state - redux-state-useselector
create-react-app的redux范例,通过useSelector获得state(图5-1)

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

访问state(设置和获取)

这里还是沿用create-react-appredux模版,基本情况参考文章:

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;
}

苏南大叔:create-react-app的redux范例,通过useSelector获得state - 访问state的方式
create-react-app的redux范例,通过useSelector获得state(图5-2)

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

定义位置访问方式
slice内部state.{value}
slice外部state.{store中定义的reducer名字}.{value}

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

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

来自reactuseState

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

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

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

按照苏南大叔的理解,这句话的意思是:

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

苏南大叔:create-react-app的redux范例,通过useSelector获得state - 两个state相关的use对比
create-react-app的redux范例,通过useSelector获得state(图5-3)

来自reduxuseSelector

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

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

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

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

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

苏南大叔:create-react-app的redux范例,通过useSelector获得state - state-name
create-react-app的redux范例,通过useSelector获得state(图5-4)

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对应的函数中,

  • reduxstate是有命令空间的,来自于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不一样!reduxstatereact里面,叫做selector

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

以下截图来自react devtools

苏南大叔:create-react-app的redux范例,通过useSelector获得state - usestate-useselector
create-react-app的redux范例,通过useSelector获得state(图5-5)

相关文档

综述

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

助理微信

微信打赏码

微信公众号

微信小程序

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   redux