redux将所有数据存储到树中,且树是唯一的。

Redux基本概念

  • store:存储树结构。
  • state:维护的数据,一般维护成树的结构。
  • reducer:对state进行更新的函数,每个state绑定一个reducer。传入两个参数:当前stateaction,返回新state
  • action:一个普通对象,存储reducer的传入参数,一般描述对state的更新类型。
  • dispatch:传入一个参数action,对整棵state树操作一遍。

    React-Redux基本概念

  • Provider组件:用来包裹整个项目,其store属性用来存储reduxstore对象。
  • connect(mapStateToProps, mapDispatchToProps)函数:用来将store与组件关联起来。

    • mapStateToProps:每次store中的状态更新后调用一次,用来更新组件中的值。
    • mapDispatchToProps:组件创建时调用一次,用来将storedispatch函数传入组件。

安装

npm i redux react-redux @reduxjs/toolkit

使用

导入包

在定义store的jsx中导入,当然如果是写在一个文件中就没关系

import { configureStore } from "@reduxjs/toolkit";

在main.jsx/index.jsx中导入Provider

import { Provider } from 'react-redux';

在每一个需要使用到redux全局变量的组件内部导入connect

import { connect } from 'react-redux';

定义actions

可以单独写一个文件,中放一个对象的全局变量来存actions

定义reducer

reducer是一个函数,需要传入两个参数,一个是state,另外一个是action
action是一个对象,state是当前存的数据,需要赋一个初值
例如:

const reducer = (state="0", action) => {
    switch(action.type) {
    }
};

state同时可以维护一个对象,此时reducer可以这样写

const reducer = (state={
    currentOperand: "",
    lastOperand: "",
    operation: "",
}, action) => {
    switch(action.type) {
        default:
            return state;
    }
};

定义store

const store = configureStore({
    reducer: reducer
});

store 和两个reducer的名称可以任意,自己知道就行。
这里reducer和reducer重名,可以只写一个reducer来表示reducer: reducer

例如:

const store = configureStore({
    reducer
});

使用store

在main.jsx/index.jsx中将有使用redux的组件用<Provider></Provider>括起来,同时需要给Provider传一个参数store,就是我们定义的store

例如:

  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>

mapDispatchToProps

将dispatch函数绑定到组件上

mapDispatchToProps函数定义

例如:

const mapDispatchToProps = {
    add_digit: digit => {
        return {
            type: ACTIONS.ADD_DIGIT,
            digit: digit,
        }
    }
}

使用connect组件绑定

例如:

export default connect(null, mapDispatchToProps)(DigitButton);

之后就可以通过 this.props.add_digit 来使用add_digit函数了

mapStateToProps

将state数据绑定到组件上

mapStateToProps函数定义

例如:

const mapStateToProps = (state, props) => {
    return {
        currentOperand: state.currentOperand,
        lastOperand: state.lastOperand,
        operation: state.operation,
    }
}

使用connect组件绑定

例如

export default connect(mapStateToProps)(Calculator);

之后就可以通过 this.props. ...来访问state中的数据了

现在是晚上9点多,在实验室。明明到了期末应该是要复习的时候,但是就是不想复习。也没有什么要做的事情。本来想学一学算法或者看一看前端,但是都看不下去也就算了。
想到昨天晚上,在实验室里,看到了以前初中同学给我发了一照片,问我眼不眼熟,是一张被隔板档住了三分之二的脸。只剩下了一双眼睛。我看了看,想着要怎么回。
最后憋出了一句”这是XXX吗?“
微信那边的同学回了简短的两个字,是的。
看着聊天框,好像一下子变得沉默了。
我又思索了下,问我同学,有打招呼吗?
他说有,我说,挺好的。
我关掉了窗口,盯着电脑的封面,眼前一下子什么都看不到了,整个人沉浸在回忆的动作里。努力会想起那段时间带给我的种种感受。不清楚好的剩下了多少,也不敢计较不好的又还占着多少的记忆。
一个提示声打断了我的回忆,电脑状态栏绿泡泡不断地闪烁,是我的同学。
同学说对方想和我打招呼。我下意识想点视频,后来发现,还是不敢见面,尽管只是顺着网线而已。整理了下情绪,我故意回道,电话吗?好好。
一段时间,手机响起。我最后是在实验室外面的广场上接的电话。
电话那边各种声音不断,一下子冲击着我的大脑,让我有点晕呼呼的。
一个熟悉的声调,自话筒里面传出来,在嘈杂的环境声中显得有点不真切。
我努力地听着,对面的人只是简单的打着招呼,我做了简单的回应。
我跟她说我在哪里读书,过的很好。说我什么时候放假,最后的最后承诺会回去看看的。
电话终止于我的两句祝福,元旦快乐,新年快乐。
我叹了口气,盯着远处的草坪,光秃秃了一片。防风林遮住了大半的天空,是蓝色的。
我居然忘记了问她过的如何。现在还是在教书吧。我一直不是很想回忆我的初中班主任,对她的情感很复杂,有感激,有愧疚,最后离别时,竟少了一句道别。
少了的那句道别终于是在昨天用元旦快乐的话语补上了。
可能以后再也见不到了。
谢谢您的栽培,我现在过的很好,希望您也过得很好,新年快乐,老师。

参考资料: https://stackoverflow.com/questions/79289166/something-is-wrong-with-my-react-installation-node-as-a-whole

问题:当使用 create-react-app时出现如下报错

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/react
npm error   react@"^19.0.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^18.0.0" from @testing-library/[email protected]
npm error node_modules/@testing-library/react
npm error   @testing-library/react@"^13.0.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error C:\Users\chira\AppData\Local\npm-cache\_logs\2024-12-17T19_27_59_239Z-eresolve-report.txt
npm error A complete log of this run can be found in: C:\Users\chira\AppData\Local\npm-cache\_logs\2024-12-17T19_27_59_239Z-debug-0.log
`npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0` failed

原因可能是:

因为 React 上周刚刚更新到 v19,而 testing-library/react 还没有更新他们的依赖项要求。

解决:

使用 Vite 创建一个新的 React 应用程序。

npm create vite@latest

运行之后会让我们选择创建哪种模板,选择react之后再选择使用JavaScript即可。