React 状态管理工具 - Redux 学习笔记

最新推荐文章于 2023-11-10 16:39:44 发布

爱玲姐姐

最新推荐文章于 2023-11-10 16:39:44 发布

阅读量952

点赞数

分类专栏：大前端 React 文章标签： React redux

本文链接：https://blog.csdn.net/jal517486222/article/details/111875000

版权

React 状态管理工具 - Redux

文章出处：拉勾大前端高薪训练营

1. Redux 核心

1.1 Redux 介绍

JavaScript 状态容器，提供可预测化的状态管理

1.2 Redux 核心概念及流程

Store: 存储状态的容器，JavaScript 对象
View: 视图，HTML页面
Actions: 对象，描述对状态进行怎样的操作
Reducers: 函数，操作状态并返回新的状态

1.3 Redux 使用：计数器案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Redux</title>
</head>
<body>
  <button id="minus">-</button>
  <span id="count">0</span>
  <button id="plus">+</button>

  <script src="./redux.min.js"></script>
  <script>

    // 3. 存储默认状态
    const initialState = {
    
      count: 0
    }

    // 2. 创建 reducer 函数
    function reducer(state = initialState, action) {
    
      switch (action.type) {
    
        case 'increment':
          return {
     count: state.count + 1 };
        case 'decrement':
          return {
     count: state.count - 1 };
        default:
          return state;
      }
    }

    // 1. 创建 store 对象
    const store = Redux.createStore(reducer);

    // 4. 定义 action 
    const increment = {
     type: 'increment' }
    const decrement = {
     type: 'decrement' }

    // 5. 获取按钮 给按钮添加点击事件
    document.getElementById('minus')
    .addEventListener('click', function () {
    
      // 6. 获取dispatch  触发 action 
      store.dispatch(decrement)
    })
    document.getElementById('plus')
    .addEventListener('click', function () {
    
      // 6. 获取dispatch  触发 action 
      store.dispatch(increment)
    })

    // 获取store {dispatch: ƒ, subscribe: ƒ, getState: ƒ, replaceReducer: ƒ, Symbol(observable): ƒ}
    console.log(store)
    // 获取 store 中存储的状态 state
    console.log(store.getState());

    // 订阅数据的变化
    store.subscribe(() => {
    
      console.log(store.getState())
      document.getElementById('count').innerHTML = store.getState().count
    });
  </script>
</body>
</html>

1.4 Redux 核心API

// 创建 store 对象
const store = Redux.createStore(reducer);

// 2. 创建 reducer 函数
function reducer(state = initialState, action) {
   
  switch (action.type) {
   
    case 'increment':
      return {
    count: state.count + 1 };
    case 'decrement':
      return {
    count: state.count - 1 };
    default:
      return state;
  }
}

// 获取 store 中存储的状态 state
store.getState()

// 订阅数据的变化
store.subscribe(() => {
   
  console.log(store.getState())
});

// 获取dispatch  触发 action 
store.dispatch(increment)

2. React + Redux

2.1 在 React 中不使用 Redux 时遇到的问题

在 React 中组件通信的数据流是单向的，顶层组件可以通过 Props 属性向下层组件传递数据，而下层组件不能向上层组件传递数据。要实现下层组件修改数据，需要上层组件传递修改数据的方法到下层组件。等项目越来越大的时候，组件间传递数据变得越来越困难。

2.2 在 React 项目中加入 Redux 的好处

使用 Redux 管理数据，由于 Store 独立于组件，使得数据管理独立于组件，解决了组件与组件之间传递数据困难的问题。

2.3 下载 Redux

npm install redux react-redux

2.4 Redux 工作流程

组件通过 dispatch 方法触发 Action
Store 接受 Action 并将 Action 分发给Reducer
Reducer 根据 Action 类型对状态进行更改并将更改后的状态返回给 Store
组件订阅了 Store 中的状态， Store 中的状态更新会同步到组件

2.5 Redux 使用步骤

2.5.1 创建 store

// src/store/index.js
import {
    createStore } from 'redux'
import reducer from './reducers/counter.reducer'
export const store = createStore(reducer)

在根组件中使用store：

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './components/Counter'
import {
    Provider } from 'react-redux'
import {
   store} from './store'
/**
 * react-redux
 * Provider
 * connect
 */

ReactDOM.render(
  // 通过 provider 组件，将store 放在了全局的组件可以够得着的地方
  <Provider store={
   store}>
    <Counter

最低0.47元/天解锁文章

爱玲姐姐

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
React 状态管理工具 - Redux 学习笔记

React 状态管理工具 - Redux文章出处：拉勾大前端高薪训练营1. Redux 核心1.1 Redux 介绍JavaScript 状态容器，提供可预测化的状态管理1.2 Redux 核心概念及流程Store: 存储状态的容器，JavaScript 对象View: 视图，HTML页面Actions: 对象，描述对状态进行怎样的操作Reducers: 函数，操作状态并返回新的状态1.3 Redux 使用：计数器案例<!DOCTYPE html><h
复制链接

扫一扫