前端react入门day05-Redux与React

小周不摆烂

于 2024-07-06 14:47:20 发布

阅读量1.1k

点赞数 31

分类专栏： # 前端react入门文章标签：前端 react.js 前端框架 javascript visual studio code

本文链接：https://blog.csdn.net/weixin_73295475/article/details/135698801

版权

前端react入门专栏收录该内容

6 篇文章 5 订阅

订阅专栏

(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）

Redux与React - 实现counter

整体路径熟悉

使用React Toolkit 创建 counterStore

Redux快速上手

什么是Redux？

Redux 是React最常用的集中状态管理工具，类似于Vue中的Pinia（Vuex），可以独立于框架运行

作用：通过集中管理的方式管理应用的状态

Redux快速体验

不和任何框架绑定，不使用任何构建工具，使用纯Redux实现计数器

使用步骤：

1. 定义一个 reducer 函数（根据当前想要做的修改返回一个新的状态）

2. 使用createStore方法传入 reducer函数生成一个 store实例对象

3. 使用store实例的 subscribe方法订阅数据的变化（数据一旦变化，可以得到通知）

4. 使用store实例的 dispatch方法提交action对象触发数据变化（告诉reducer你想怎么改数据）

5. 使用store实例的 getState方法获取最新的状态数据更新到视图中

Redux管理数据流程梳理

为了职责清晰，数据流向明确，Redux把整个数据修改的流程分成了三个核心概念，分别是： state、action和reducer

1. state - 一个对象存放着我们管理的数据状态

2. action - 一个对象用来描述你想怎么改数据

3. reducer - 一个函数更具action的描述生成一个新的state

<button id="decrement">-</button>
<span id="count">0</span>
<button id="increment">+</button>

<script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>

<script>
  // 1. 定义reducer函数 
  // 作用: 根据不同的action对象，返回不同的新的state
  // state: 管理的数据初始状态
  // action: 对象 type 标记当前想要做什么样的修改
  function reducer (state = { count: 0 }, action) {
    // 数据不可变：基于原始状态生成一个新的状态
    if (action.type === 'INCREMENT') {
      return { count: state.count + 1 }
    }
    if (action.type === 'DECREMENT') {
      return { count: state.count - 1 }
    }
    return state
  }

  // 2. 使用reducer函数生成store实例
  const store = Redux.createStore(reducer)

  // 3. 通过store实例的subscribe订阅数据变化
  // 回调函数可以在每次state发生变化的时候自动执行
  store.subscribe(() => {
    console.log('state变化了', store.getState())
    document.getElementById('count').innerText = store.getState().count
  })

  // 4. 通过store实例的dispatch函数提交action更改状态 
  const inBtn = document.getElementById('increment')
  inBtn.addEventListener('click', () => {
    // 增
    store.dispatch({
      type: 'INCREMENT'
    })
  })

  const dBtn = document.getElementById('decrement')
  dBtn.addEventListener('click', () => {
    // 减
    store.dispatch({
      type: 'DECREMENT'
    })
  })

  // 5. 通过store实例的getState方法获取最新状态更新到视图中

</script>

Redux与React - 环境准备

配套工具

在React中使用redux，官方要求安装俩个其他插件 - Redux Toolkit 和 react-redux

1. Redux Toolkit（RTK）- 官方推荐编写Redux逻辑的方式，是一套工具的集合集，简化书写方式

2. react-redux - 用来链接 Redux 和 React组件的中间件

配置基础环境

1. 使用 CRA 快速创建 React 项目

npx create-react-app react-redux

2. 安装配套工具

npm i @reduxjs/toolkit react-redux

3. 启动项目

npm run start

store目录结构设计

1. 通常集中状态管理的部分都会单独创建一个单独的 `store` 目录

2. 应用通常会有很多个子store模块，所以创建一个 `modules` 目录，在内部编写业务分类的子store

3. store中的入口文件 index.js 的作用是组合modules中所有的子模块，并导出store

Redux与React - 实现counter

整体路径熟悉

使用React Toolkit 创建 counterStore

为React注入store

react-redux负责把Redux和React 链接起来，内置 Provider组件通过 store 参数把创建好的store实例注入到应用中，链接正式建立

React组件使用store中的数据

在React组件中使用store中的数据，需要用到一个钩子函数 - useSelector，它的作用是把store中的数据映射到组件中，使用样例如下：

React组件修改store中的数据

React组件中修改store中的数据需要借助另外一个hook函数 - useDispatch ，它的作用是生成提交action对象的dispatch函数，使用样例如下：

Redux与React - 异步状态操作

异步操作样板代码

1. 创建store的写法保持不变，配置好同步修改状态的方法

2. 单独封装一个函数，在函数内部return一个新函数，在新函数中

2.1 封装异步请求获取数据

2.2 调用同步actionCreater 传入异步数据生成一个action对象，并使用dispatch提交

3. 组件中dispatch的写法保持不变