React06：Redux

最新推荐文章于 2022-09-27 19:28:27 发布
最新推荐文章于 2022-09-27 19:28:27 发布
阅读量308 收藏
点赞数
分类专栏： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44145258/article/details/107530064
版权

redux

  • Redux 是一个独立的 JavaScript 状态管理库
  • https://www.redux.org.cn/

安装 Redux

npm i redux
yarn add redux

核心概念

理解 Redux 核心几个概念与它们之间的关系

  • state 状态
  • reducer 纯函数
  • store 仓库
    • dispatch 向reducer发起action
    • getState 获取state
    • subscribe 监听state
  • action 动作

流程

  1. 首先通过createStore 创建仓库
  2. 基于render纯函reducer数初始化state
  3. 修改时通过store提供的dispatch方法发起一个action
  4. action被传入纯函数reducer中对state进行修改

Store 对象

为了对 state，Reducer，action 进行统一管理和维护，我们需要创建一个 Store 对象

import { createStore } from "redux";


function reducer(state = {}, action) {
    return state;
}

const store = createStore(reducer);
console.dir(store);

dispatch

调用 dispatch 方法，可以向 store 发起 action，

store 会调用 reducer，将 action 传递给 reducer

是一个同步方法

getState

获取 store 中存储的 state

subscribe：

用于监听 state 变化，或取消监听，用于获取最新的state

import { createStore } from "redux";


function reducer(state = {
    cnt: 1
}, action) {
    console.log(action);
    switch (action.type) {
        case "add":
            state.cnt++;
            return state;   // 把修改后的新的state返回
        default:
            break;
    }
    return state;
}

const store = createStore(reducer);
// console.dir(store);
store.subscribe(() => {
    console.log("state修改了", store.getState());
});
setInterval(() => {
    store.dispatch({
        type: "add"
    });
}, 1000);

state 对象

通常我们会把应用中的数据存储到一个对象树（Object Tree） 中进行统一管理，我们把这个对象树称为：state

state 是只读的

这里需要注意的是，为了保证数据状态的可维护和测试，不推荐直接修改 state 中的原数据

通过纯函数修改 state

什么是纯函数？

reducer 纯函数

  1. 相同的输入永远返回相同的输出
  2. 不修改函数的输入值
  3. 不依赖外部环境状态
  4. 无任何副作用

使用纯函数的好处

  1. 便于测试
  2. 有利重构
import { createStore } from "redux";


function reducer(state = {
    cnt: 1
}, action) {
    console.log(action);
    switch (action.type) {
        case "ADD":
            state.cnt++;
            return state;   // 把修改后的新的state返回
        case "MINUS":
            state.cnt--;
            return state;
    }
    return state;
}

const store = createStore(reducer);
// console.dir(store);

window.onload = function () {
    let addBtn = document.createElement("button");
    addBtn.innerHTML = "++";
    addBtn.onclick = () => {
        store.dispatch({
            type: "ADD"
        });
    };
    document.body.appendChild(addBtn);
    let p = document.createElement("p");
    render();
    document.body.appendChild(p);
    let minusBtn = document.createElement("button");
    minusBtn.innerHTML = "--";
    minusBtn.onclick = () => {
        store.dispatch({
            type: "MINUS"
        });
    };
    document.body.appendChild(minusBtn);
    store.subscribe(render);
    
    function render() {
        console.log("state修改了", store.getState());
        p.innerHTML = store.getState().cnt;
    }

};

action 对象

action 修改动作

  • action 本质就是一个对象，
  • 该对象必须有 type 属性，
  • type 属性中，描述的是我们要对 state 做出哪种修改，
  • reducer中会接收到 action ，然后完成对state的修改

我们对 state 的修改是通过 reducer 纯函数来进行的，同时通过传入的 action 来执行具体的操作

  • type 属性 : 表示要进行操作的动作类型，增删改查……
  • payload属性 : 操作 state 的同时传入的数据

但是这里需要注意的是，我们不直接去调用 Reducer 函数，而是通过 Store 对象提供的 dispatch 方法来调用

react-redux

react项目中的 redux 绑定库

  • <Provider store>
  • connect() – 高阶函数:传入数据，返回一个函数
  • useSelector 获取 state
  • useDispatch 获取 dispatch
  • useStore 获取 store

<Provider store=>

<Provider store> 使组件层级中的 connect() 方法都能够获得 Redux store

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from "react-redux";
import store from "./store/index";
import App from './app';
ReactDOM.render(
  <Provider store={store}>
    <App />,
  </Provider>,
  document.getElementById('root')
);

connect

let cb = connect((state) => {...state})
  • 返回值state必须是个对象
  • 通过connect可以让组件获取到state和dispatch
import React, { Component } from 'react';
import "./index.css";
import AddMessage from './addMessage';
import MessageList from './messageList';
import { connect } from 'react-redux';
function App(props) {
    console.log(props);
    let { data } = props;
    return <section className="wrap">
        <h2 className="title">留言板</h2>
        <AddMessage />
        {data.length > 0 ? <MessageList
            data={data}
        /> : ""}
    </section>;
}

App = connect(state => state)(App);

export default App;

useSelector

用于获取state

useSelector(state => 我们需要的state相关数据

import React from 'react';
import "./index.css";
import AddMessage from './addMessage';
import MessageList from './messageList';
import { useSelector } from 'react-redux';
function App() {
    let data = useSelector(state => state);
    return <section className="wrap">
        <h2 className="title">留言板</h2>
        <AddMessage />
        {data.length > 0 ? <MessageList /> : ""}
    </section>;
}
export default App;

import React, { Component } from 'react';
import "./index.css";
import AddMessage from './addMessage';
import MessageList from './messageList';
import { useSelector, useDispatch, useStore } from 'react-redux';

function App() {
    let data = useSelector(state => state);
    let dispatch = useDispatch();
    let store = useStore();
    console.log(data, dispatch, store);
    return <section className="wrap">
        <h2 className="title">留言板</h2>
        <AddMessage />
        {data.length > 0 ? <MessageList
            data={data}
        /> : ""}
    </section>;
}

export default App;

在这里插入图片描述

useDispatch 获取 dispatch

useStore 获取 store

实例

留言store
设置store创建仓库
设置action 方法

import { createStore } from "redux";
function reducer(state = [{
    id: 0,
    name: "昵称",
    message: "留言内容留言内容留言内容留言内容留言内容1"
}, {
    id: 1,
    name: "昵称22",
    message: "留言内容容留言内容留言内容留言内容留言内容留言内容33"
}], action) {
    switch (action.type) {
        case "ADD_MESSAGE":
            return [{
                id: Date.now(),
                name: action.name,
                message: action.message
            }, ...state];
        case "REMOVE_MESSAGE":
            return state.filter(item => item.id !== action.id);
    }
    return state; //初始化
}
const store = createStore(reducer);
export default store;

组件获取store中的state，渲染数据

import React from "react";
import Message from "./message";
import { useSelector } from "react-redux";
export default function MessageList() {
    let data = useSelector(state => state);
    return <ul className="messageList">
        {
            data.map(item => <Message key={item.id} data={item} />)
        }
    </ul>;
}

组件dispatch提交方法

import React from "react";
import { useDispatch } from "react-redux";
export default function Message(props) {
    let { data } = props;
    let { id, name, message } = data;
    let dispatch = useDispatch();
    return <li>
        <h3>{name}</h3>
        <p>{message}</p>
        <a onClick={() => {
            dispatch({
                type: "REMOVE_MESSAGE",
                id
            });
        }}>删除</a>
    </li>;
}

redux 三大原则

  • 单一数据源: 整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中
  • State 是只读的: 唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象
  • 使用纯函数来执行修改

中间件

更新的过程中，去做一些其他的事情，
dispatch —> reducer 更新state
dispatch --> 中间件 --> reducer

异步中间件redux-thunk

因为dispatch是一个同步方法，想要一步获取数据的时候就需要异步操作

普通的异步操作

function List() {
    let { type = "all" } = useParams();
    let { loading, data } = useSelector(state => state);
    let dispatch = useDispatch();
    useEffect(() => {
        dispatch({
            type: "LOADING"
        });
        axios.get(`https://cnodejs.org/api/v1/topics?page=1&tab=${type}&limit=10`)
            .then(res => {
                dispatch({
                    type: "LOAD",
                    data: res.data.data
                });
            }, () => {
                dispatch({
                    type: "LOAD",
                    data: []
                });
            });
    }, [type]);
    console.log(data);
    return (<Fragment>
        {loading ?
            "数据获取中……"
            :
            (
                data.length > 0 ? (
                    <ul className="list">
                        {data.map(item => (<li key={item.id}>{item.title}</li>))}
                    </ul>
                ) : "暂无数据"
            )}
    </Fragment>
    );
}

redux-thunk

  • 参数是对象，直接调用 reducer 修改我们的 state
  • 参数是函数，调用该函数，并且把 dispatch 和 getState 传递我们的函数，可以在函数中，进行异步操作

在这里插入图片描述
启用thunk

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";

function reducer(state = {
    data: [],
    loading: false
}, action) {
    switch (action.type) {
        case "LOADING": // 正在获取数据
            return {
                data: [],
                loading: true
            };
        case "LOAD"://数据获取完成有数据
            return {
                data: action.data,
                loading: false
            };
    }
    return state;
}
//添加一个中间件
const store = createStore(reducer, applyMiddleware(thunk));

export default store;

可以把所有的action提取出去，减少组件内部逻辑

import React, { Fragment, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { getListData } from "./store/action";
function List() {
    let { type = "all" } = useParams();
    let { loading, data } = useSelector(state => state);
    let dispatch = useDispatch();
    useEffect(() => {
        dispatch(getListData(type));
    }, [type]);
    return (<Fragment>
        {loading ?
            "数据获取中……"
            :
            (
                data.length > 0 ? (
                    <ul className="list">
                        {data.map(item => (<li key={item.id}>{item.title}</li>))}
                    </ul>
                ) : "暂无数据"
            )}
    </Fragment>
    );
}
export default List;

抽离出来的dispatch方法

import axios from "axios";
function getListData(type) {
    return (dispatch, getState) => {
        dispatch({
            type: "LOADING"
        });
        axios.get(`https://cnodejs.org/api/v1/topics?page=1&tab=${type}&limit=10`)
            .then(res => {
                dispatch({
                    type: "LOAD",
                    data: res.data.data
                });
            }, () => {
                dispatch({
                    type: "LOAD",
                    data: []
                });
            });
    };
}
export { getListData };

hooks替代thunk异步（hooks才是未来）

    let getListData = useListData();
    useEffect(() => {
        getListData(type);
    }, [type]);

useListData

import { useDispatch } from "react-redux";
import axios from "axios";
function useListData() {
    let dispatch = useDispatch();
    return (type) => {
        dispatch({
            type: "LOADING"
        });
        axios.get(`https://cnodejs.org/api/v1/topics?page=1&tab=${type}&limit=10`)
            .then(res => {
                dispatch({
                    type: "LOAD",
                    data: res.data.data
                });
            }, () => {
                dispatch({
                    type: "LOAD",
                    data: []
                });
            });
    };
}
export { useListData };

reducer的拆分

当state数据多的时候会比较乱

function index(state = {
    list: {},
    topic: {},
    user: {}
}, action) {
    return {
        list: list(state.list, action),
        topic: topic(state.topic = {}, action),
        user: user(state.user = {}, action)
    };
}

所以可以将每个reducer抽离出来，使得逻辑清晰

function index(state = {
    list: {},
    topic: {},
    user: {}
}, action) {
    return {
        list: list(state.list, action),
        topic: topic(state.topic = {}, action),
        user: user(state.user = {}, action)
    };
}
function list(list = {}, action) {
    return list;
}
function topic(topic = {}, action) {
    return topic;
}
function user(user = {}, action) {
    return user;
}

export default index;
斜光
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-redux：Redux的官方React绑定
02-05
React Redux 官方React绑定。 高效且灵活。 安装 使用创建React App 建议使用React Redux启动新应用的方法是使用的，该利用优势。 npx create-react-app my-app --template redux 现有的React应用 React Redux ...
【React】React状态管理redux React中Dispatch
最新发布
康一夏忙中偷闲的日子
09-28 499
是一个普通action方法调用,传递了val参数,得到一个事件描述 ,这个描述其实也是一个普通的JavaScript对象(参考下面派发给Reducers 的数据格式)本例中 containers/AddUser.jsx 代码, 容器组件和展示组件的属性做一个映射, 容器组件会监听到 Redux state 的变化,提供给展示组件。action 描述事件的发生，text 是调用者传递的参数。state参数 是旧的数据。
小程序云开发中如何生成pdf?
像风一样自由
09-23 5063
需求: 需要将小程序中的界面生成pdf导出 思路: 在云函数中使用nodeJs库是否可以生成？ 小程序端使用canvas生成图片。再转成pdf
28、react 使用 react-redux
大家好，我是 ed.
09-27 933
reac-redux 是一个 react 的插件库。作用是专门用来简化 react 应用中使用 redux。
vue父与子组件数据多次交互，子组件为model
yousacks的博客
10-12 277
尽量将子组件中的model写在父组件内
react-redux的使用
weixin_47552598的博客
10-15 41
react-redux store存储状态数据 reducer 接受action并更新store 通过Provider 将store里面的数据通过props传给子孙组件 通过connect高阶函数连接react组件与redux 有四个参数 一般只用前两个 mapStateToProps mapDispatchToProps 第一个参数将数据映射到props里 第二个参数可以dispatch一些方法 //store index.js import {createStore} from 'redu
React全栈：Redux+Flux+webpack+Babel整合开发试读样章
12-30
React完整生态首度技术曝光 新一代全栈利器实战登场
beautiful-react-redux：Redux:rocket:，Redux:sign_of_the_horns:，Redux:fire:-以及魔术优化
02-05
只需导入beautiful-react-redux，而不必考虑重新选择和任何其他选择器备注。 现在，您的应用程序将像在下面的MobX一样运行。 当您不期望它们时没有更新。 对全部。 免费！ 用法 自动魔术 // to get automatic deep...
react-pizza:Redux React上的在线比萨店网站
05-26
ReactJS React Router Redux Redux thunk json服务器Axios Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您...
react-redux-creator:redux集合
05-06
react-redux-creator集成了react-router, react-redux, redux, redux-actions, redux-saga, seamless-immutable, connected-react-router, 简化了redux/异步处理和路由集成的配置工作，开箱即用使用redux常常需要...
Vue学习笔记 —— 注册组件
weixin_43340295的博客
09-16 154
什么是组件化开发？ 如果将一个页面所有的逻辑代码全部放在一起，当我们想要改变一些内容或者样式，处理起来会非常复杂，而且也不利于后续管理以及拓展。 我们可以将一个页面拆分成一个个小的功能模块，每个功能块完全属于自己这部分的独立功能，那么后面整个页面和维护就变得比较容易。 使用组件的好处： 减少代码量，提高开发效率 代码可以重复使用 更容易被管理和维护 便于协同开发 组件是由HTML+Css+Js组成 组件嵌套使用 组件它是可以在，任意组件中使用的，但是局部组件之间不可以直接相互使用，如果需要相互使用就
vue-组件详解
qq_42450726的博客
10-09 363
VUE-组件组件的定义组件的定义组件组件挂载全局挂载局部挂载组件使用注意 组件的定义 使开发者根据自己的需求,扩展 HTML 元素，封装可重用的代码。 有利于修改代码,提高了代码的易用性 组件的 定义组件 组件也是Vue实例,因此就有了data、method、computed、watch等属性。 组件的命名通常是大驼峰（CaBa）或者是下划线(ca-ba)的命名方式。 teplate属性是组件中至关重要的一环,它表示组件是以何种元素组成 例如: const CommonHead={ templ
dispatch作用 react_在组件里 dispatch 动作《 Redux 与 React 》
weixin_39602737的博客
12-19 343
在这个 PostItem 组件里面，标题的下面，再添加一个按钮 .. 用一组 button .. 按钮上的文字是 DELETE .. 按一下这个按钮可以删除掉当前内容项目 ..这个删除的行为我们可以在 Posts 这个组件里面去定义一下 .. 在这个类组件里面，添加一个 onClickDeleteButton 方法 .. 它支持一个 id 参数 ..然后在这个 onClickDeleteBut...
redux 多种触发dispatch方式
热门推荐
邱凯翔 Edward 的个人博客
09-13 3万+
[原文链接]https://blog.bam.tech/developper-news/4-ways-to-dispatch-actions-with-redux redux 作为js app的主要的状态容器和react结合的非常多。架构设计上基于action的触发机制，通过dispatch对应的action来修改状态，而状态的修改由统一的reducer来处理（为什么叫reducer呢，因为每个...
React redux 获取数据store.getState()
weixin_40030173的博客
08-03 6245
一、获取数据store.getState() src/store/index.js import { createStore } from 'redux' // 引入方法 import reducer from './reducer' const store = createStore(reducer) // 创建数据存储仓库 export default store src/store/reducer.js const defaultState = { inputValue
react经验3:状态管理组件redux的简单应用
Comvir的专栏
09-16 286
针对react@18版本编写，使用函数式组件
redux个人理解 以及react-redux的使用
csdn_dailiang的博客
08-06 344
store 字典数据中心 const initState={ inputValue:'123', list:[1,2] } reducer 相当于字典的目录，怎么操作字典 reducer就是一个函数，两个参数，第一个参数是store，第二个参数是操作方法 根据操作，修改store，然后返回一个新的store const reducer=(state=initState,action)=>{ if(action.type==='add_todo_item'){
dispatch作用 react_React系列十五 Redux(一)初见
weixin_34213766的博客
12-30 2533
在React的开发过程中，Redux对于我们是非常重要的。但是对于很多人来说，初次接触redux会感觉redux的学习坡度非常陡峭，难度比较大。在接下来，我会通过一个系列的方式循循渐进、层层深入的方式来讲解Redux：从redux的独立使用过程、到redux的结构划分、到redux结合react的过程、到redux中异步操作、到复杂数据的结构处理、到结合immutable的使用。整个过程...
react调用api等待返回结果_Redux + React-Router 的入门教学和配置教程，看这一篇就够了...
weixin_39830012的博客
10-21 442
前言 React 是单向数据流，数据通过 props 从父节点传递到子节点。如果顶层的某个 props 改变了， React 会重新渲染所有的子节点。注意：props 是只读的(即不可以使用 this.props 直接修改 props)，它是用于在整个组件树中传递数据和配置。每个组件都有属于自己的 state，state 和 props 的区别在于 state 只存在于组件内部。注意 ⚠️：只能从...
edux: redux 的实现原理
07-24
通过 `react-redux` 库提供的 `Provider` 和 `connect` 方法，可以将 Redux 的 store 注入到 React 组件中，并根据需要连接组件与状态。 总的来说，Redux 的实现原理是通过单一数据源、纯函数修改状态、订阅通知和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值