react中的状态管理-redux

已于 2022-08-16 23:52:02 修改
阅读量470 收藏 1
点赞数
分类专栏： React 文章标签： react.js 前端
于 2022-08-14 23:13:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fangqi20170515/article/details/126160173
版权

react中的状态管理-redux

  1. 英文文档: https://redux.js.org/
  2. 中文文档: http://www.redux.org.cn/
  3. Github: https://github.com/reactjs/redux

一、redux

1、redux是什么？

  1. redux是一个专门用于做状态管理的JS库;
  2. 它可以用在react, angular, vue等项目中, 但基本与react配合使用;
  3. 作用: 集中式管理react应用中多个组件共享的状态。

2、什么时候需要使用redux?

  1. 某个组件的状态，需要让其他组件可以随时拿到（共享）。
  2. 一个组件需要改变另一个组件的状态（通信）。
  3. 总体原则：能不用就不用, 如果不用比较吃力才考虑使用。

3、redux工作流程

在这里插入图片描述

4、redux的三个核心概念

4.1、action

  1. 动作的对象
  2. 包含2个属性
     type：标识属性, 值为字符串, 唯一, 必要属性
     data：数据属性, 值类型任意, 可选属性
  3. 例子：{ type: ‘ADD_STUDENT’,data:{name: ‘tom’,age:18} }

4.2、reducer

  1. 用于初始化状态、加工状态。
  2. 加工时，根据旧的state和action， 产生新的state的纯函数。

4.3、store

  1. 将state、action、reducer联系在一起的对象
  2. 如何得到此对象?
    1. import {createStore} from ‘redux’
    2. import reducer from ‘./reducers’
    3. const store = createStore(reducer)
  3. 此对象的功能?
    1. getState(): 得到state
    2. dispatch(action): 分发action, 触发reducer调用, 产生新的state
    3. subscribe(listener): 注册监听, 当产生了新的state时, 自动调用

5、redux的核心API

5.1、createstore()

  作用：创建包含指定reducer的store对象

5.2、store对象

  1. 作用: redux库最核心的管理对象
  2. 它内部维护着:
    1. state
    2. reducer
  3. 核心方法:
    1. getState()，获取状态
    2. dispatch(action)，派发行为
    3. subscribe(listener)，监测redux的状态变化
  4. 具体编码:
    1. store.getState()
    2. store.dispatch({type:‘INCREMENT’, number})
    3. store.subscribe(render)

5.3、applyMiddleware()

  作用：应用上基于redux的中间件(插件库)

5.4、combineReducers()

  作用：合并多个reducer函数

6、异步action

  1. redux默认是不能进行异步处理的,
  2. 某些时候应用中需要在redux中执行异步任务(ajax, 定时器)
  3. 使用异步中间件：npm install --save redux-thunk

7、redux的应用（求和案例）

运行结果
在这里插入图片描述

文件目录结构
在这里插入图片描述

1、创建store，store.js

/*该文件专门用于暴露一个store对象，整个应用只有一个store对象*/

//1、引入createStore，专门用于创建redux中最为核心的store对象,applyMiddleware:执行中间件
import {createStore, applyMiddleware} from "redux";

//2、引入为count组件服务的reducer
import countReducer from "./count_reducer";

//3、引入redux-thunk，用于支持异步action
import thunk from "redux-thunk";

//4、暴露store
export default createStore(countReducer, applyMiddleware(thunk));

2、count_reducer

/*
* 1、初始化状态
* 2、加工状态
* 该文件用于创建一个为count组件服务的reducer,reducer的本质就是一个函数;
* reducer会接收到两个参数，分别为：之前的状态（preState），行为（action）
* */
import {INCREMENT,DECREMENT} from "./constant";

const initState = 7;

function countReducer(preState = initState, action) {
    console.log(preState, action);
    const {type, data} = action;
    switch (type) {
        case INCREMENT://加
            return preState + data;
        case DECREMENT://减
            return preState - data;
        default:
            return preState
    }
}

export default countReducer

3、count_action.js

/*该文件专门为count组件生成action对象*/
import {INCREMENT, DECREMENT} from "./constant";
import store from "./store";

//同步action,就是指action的值为object类型的一般对象
export const createIncrementAction = data => ({type: INCREMENT, data})
export const createDecrementAction = data => ({type: DECREMENT, data})
//所谓的异步action，就是指action的值为函数，需要使用一个中间插件，
// 异步action中一般都会调用同步action，异步action不是必须要用的
export const createIncrementAsyncAction = (data, time) => {
    //返回的是一个函数
    return () => {
        setTimeout(() => {
            store.dispatch(createIncrementAction(data))
        }, time)
    }
}

4、constant.js

/*
* 该模块是用于定义action对象中type类型的常量值，
* 便于管理的同时，当值程序员单词写错，降低单词拼写出错率*/
export const INCREMENT = "increment";
export const DECREMENT = "decrement";

5、count/index.js

import React, {Component} from 'react';
//1、引入store，用于获取redux中保存的状态
import store from "../../redux/store";
//2、引入actionCreator，专门用于创建对象
import {createDecrementAction, createIncrementAction, createIncrementAsyncAction} from "../../redux/count_action";

export default class Count extends Component {
    /*    componentDidMount() {
            //5、组件挂载完成后监测redux中的状态变化，只要变化就调用render渲染页面
            store.subscribe(() => {
                this.setState({})
            })
        }*/

    increment = () => {
        const {value} = this.selectNumber;
        // 4、通知redux加value(store.dispatch进行行为派发)
        store.dispatch(createIncrementAction(value * 1))

    }
    decrement = () => {
        const {value} = this.selectNumber;
        store.dispatch(createDecrementAction(value * 1))
    }
    //奇数再加
    incrementIfOdd = () => {
        const {value} = this.selectNumber;
        const count = store.getState()
        if (count % 2 !== 0) {
            store.dispatch(createIncrementAction(value * 1))
        }
    }
    //异步加
    incrementAsync = () => {
        const {value} = this.selectNumber;
        store.dispatch(createIncrementAsyncAction(value * 1, 500))
    }

    render() {
        return (
            <div>
                {/*3、store.getState()获取状态*/}
                <h1>当前求和为:{store.getState()}</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select><br/><br/>
                <button onClick={this.increment}>+</button>
                &nbsp;
                <button onClick={this.decrement}>-</button>
                &nbsp;
                <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>
                &nbsp;
                <button onClick={this.incrementAsync}>异步加</button>
            </div>
        )
    }
}

监测redux的状态变化也可以在index.js入口文件中完成

import App from './App';
import store from "./redux/store";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <App/>
    </React.StrictMode>
);

//监测redux状态变化的api写在这里，就不用每个组件都需要调用store.subscribe
// 检测redux 状态 发生变化 整个app 都调用 render()  作用是不用重复写 componentDidMount
store.subscribe(() => {
    root.render(
        <React.StrictMode>
            <App/>
        </React.StrictMode>
    );
})

6、App.js
在App.js文件中引入组件count/index.js

在这里插入图片描述

二、react-redux

1、react-Redux将所有组件分成两大类

  1. UI组件
    1. 只负责 UI 的呈现，不带有任何业务逻辑
    2. 通过props接收数据(一般数据和函数)
    3. 不使用任何 Redux 的 API
    4. 一般保存在components文件夹下
  2. 容器组件
    1. 负责管理数据和业务逻辑，不负责UI的呈现
    2. 使用 Redux 的 API
    3. 一般保存在containers文件夹下

2、react-redux相关的API

2.1、Provider

  让所有组件都可以得到state数据

root.render(
    /*Provider让所有组件都可以得到state数据*/
    <Provider store={store}>
        <App/>
    </Provider>
);

2.2、connect

  用于包装 UI 组件生成容器组件

export const CountContainer = connect(
    mapStateToProps,
    mapDispatchToProps)(CountUI)

2.3、 mapStateToprops

  将外部的数据（即state对象）转换为UI组件的标签属性

const mapStateToProps = (state) => {
    //返回值是一个对象
    return {count: state}
}

2.4、mapDispatchToProps

  将分发action的函数转换为UI组件的标签属性

3、react-redux的应用（求和案例）

  1. 运行效果
    在这里插入图片描述

  2. 文件目录结构
    在这里插入图片描述

3.components/count/index.js

import React, {Component} from 'react';

export default class Count extends Component {
    increment = () => {
        const {value} = this.selectNumber;
        this.props.jia(value * 1)
    }
    decrement = () => {
        const {value} = this.selectNumber;
        this.props.jian(value * 1)
    }
    //奇数再加
    incrementIfOdd = () => {
        const {value} = this.selectNumber;
        if (this.props.count % 2 !== 0) {
            this.props.jia(value * 1)
        }
    }
    //异步加
    incrementAsync = () => {
        const {value} = this.selectNumber;
        this.props.jiaAsync(value * 1,500)
    }

    render() {
        console.log('UI组件', this.props);
        return (
            <div>
                <h1>当前求和为:{this.props.count}</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select><br/><br/>
                <button onClick={this.increment}>+</button>
                &nbsp;
                <button onClick={this.decrement}>-</button>
                &nbsp;
                <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>
                &nbsp;
                <button onClick={this.incrementAsync}>异步加</button>
            </div>
        )
    }
}
  1. containers/count/index.jsx
//这是一个容器组件

//1、引入connect用于连接UI组件与redux
import {connect} from "react-redux";

//2、引入Count的UI组件
import CountUI from "../../components/count";
//3、引入action
import {createIncrementAction, createDecrementAction, createIncrementAsyncAction} from "../../redux/count_action";

/*
* 1、mapStateToProps函数的返回是一个对象
* 2、返回的对象中key就作为状态传递给UI组件props的key，value就作为传递给UI组件props的值value
* 3、mapStateToProps用于传递状态*/
const mapStateToProps = (state) => {
    //返回值是一个对象
    return {count: state}
}

/*
* 1、mapDispatchToProps函数的返回是一个对象
* 2、返回的对象中key就作为状态传递给UI组件props的key，value就作为传递给UI组件props的值value
* 3、mapStateToProps用于传递操作状态的方法*/
const mapDispatchToProps = (dispatch) => {
    return {
        jia: (data) => {
            dispatch(createIncrementAction(data))
        },
        jian: (data) => {
            dispatch(createDecrementAction(data))
        },
        jiaAsync: (data, time) => {
            dispatch(createIncrementAsyncAction(data, time))
        }
    }
}

//4、connect()()创建并暴露Count的容器组件
//connect()第一次调用的时候必须传入两个参数，两个参数必须是函数
export const CountContainer = connect(
    mapStateToProps,
    mapDispatchToProps)(CountUI)

/*简写
 1. */
/*export const CountContainer = connect(
    state => ({count: state}),
 /!*   //mapDispatchToProps的一般写法
    dispatch => ({
        jia: data => dispatch(createIncrementAction(data)),
        jian: data => dispatch(createDecrementAction(data)),
        jiaAsync: (data, time) => dispatch(createIncrementAsyncAction(data, time))
    })*!/
    //mapDispatchToProps的简写
    {
        //reaact-redux会自动进行派发
        jia:createIncrementAction,
        jian:createDecrementAction,
        jiaAsync:createIncrementAsyncAction
    }
    )(CountUI)*/
  1. store.js
/*该文件专门用于暴露一个store对象，整个应用只有一个store对象*/

//1、引入createStore，专门用于创建redux中最为核心的store对象,applyMiddleware:执行中间件
import {createStore, applyMiddleware} from "redux";

//2、引入为count组件服务的reducer
import countReducer from "./count_reducer";

//3、引入redux-thunk，用于支持异步action
import thunk from "redux-thunk";

//4、暴露store
export default createStore(countReducer, applyMiddleware(thunk));
  1. count_reducer
/*
* 1、初始化状态
* 2、加工状态
* 该文件用于创建一个为count组件服务的reducer,reducer的本质就是一个函数;
* reducer会接收到两个参数，分别为：之前的状态（preState），行为（action）
* */
import {INCREMENT,DECREMENT} from "./constant";

const initState = 7;

function countReducer(preState = initState, action) {
    console.log(preState, action);
    const {type, data} = action;
    switch (type) {
        case INCREMENT://加
            return preState + data;
        case DECREMENT://减
            return preState - data;
        default:
            return preState
    }
}

export default countReducer
  1. count_action.js
/*该文件专门为count组件生成action对象*/
import {INCREMENT, DECREMENT} from "./constant";
import store from "./store";

//同步action,就是指action的值为object类型的一般对象
export const createIncrementAction = data => ({type: INCREMENT, data})
export const createDecrementAction = data => ({type: DECREMENT, data})
//所谓的异步action，就是指action的值为函数，需要使用一个中间插件，
// 异步action中一般都会调用同步action，异步action不是必须要用的
export const createIncrementAsyncAction = (data, time) => {
    //返回的是一个函数
    return () => {
        setTimeout(() => {
            store.dispatch(createIncrementAction(data))
        }, time)
    }
}
  1. constant.js
/*
* 该模块是用于定义action对象中type类型的常量值，
* 便于管理的同时，当值程序员单词写错，降低单词拼写出错率*/
export const INCREMENT = "increment";
export const DECREMENT = "decrement";
  1. App.js
//1、引入容器里面的CountContainer组件
import {CountContainer} from "./containers/count";
import './App.css';

function App() {
    return (
        <div className="App">
            <CountContainer/>
        </div>
    );
}

export default App;
  1. index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import store from "./redux/store";
import {Provider} from "react-redux"
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    /*Provider让所有组件都可以得到state数据*/
    <Provider store={store}>
        <App/>
    </Provider>
);

将UI组件和容器组件结合到一起

import {connect} from "react-redux";
import React, {Component} from 'react';
import {createIncrementAction, createDecrementAction, createIncrementAsyncAction} from "../../redux/count_action";

//定义UI组件
class Count extends Component {
    increment = () => {
        const {value} = this.selectNumber;
        this.props.jia(value * 1)
    }
    decrement = () => {
        const {value} = this.selectNumber;
        this.props.jian(value * 1)
    }
    //奇数再加
    incrementIfOdd = () => {
        const {value} = this.selectNumber;
        if (this.props.count % 2 !== 0) {
            this.props.jia(value * 1)
        }
    }
    //异步加
    incrementAsync = () => {
        const {value} = this.selectNumber;
        this.props.jiaAsync(value * 1, 500)
    }

    render() {
        console.log('UI组件', this.props);
        return (
            <div>
                <h1>当前求和为:{this.props.count}</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select><br/><br/>
                <button onClick={this.increment}>+</button>
                &nbsp;
                <button onClick={this.decrement}>-</button>
                &nbsp;
                <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>
                &nbsp;
                <button onClick={this.incrementAsync}>异步加</button>
            </div>
        )
    }
}

export const CountContainer = connect(
    state => ({count: state}),
    {
        jia: createIncrementAction,
        jian: createDecrementAction,
        jiaAsync: createIncrementAsyncAction
    }
)(Count)

4、react-redux数据共享案例

效果：

在这里插入图片描述

文件目录:

在这里插入图片描述

containers/count/index.jsx

import {connect} from "react-redux";
import React, {Component} from 'react';
import {createIncrementAction, createDecrementAction, createIncrementAsyncAction} from "../../redux/actions/count";

class Count extends Component {
    increment = () => {
        const {value} = this.selectNumber;
        this.props.increment(value * 1)
    }
    decrement = () => {
        const {value} = this.selectNumber;
        this.props.decrement(value * 1)
    }
    incrementIfOdd = () => {
        const {value} = this.selectNumber;
        if (this.props.count % 2 !== 0) {
            this.props.increment(value * 1)
        }
    }
    incrementAsync = () => {
        const {value} = this.selectNumber;
        this.props.incrementAsync(value * 1, 500)
    }

    render() {
        console.log('UI组件', this.props);
        return (
            <div>
                <h1>我是count组件</h1>
                <h1>当前求和为:{this.props.count}</h1>
                <h1>下方组件总人数为:{this.props.personTotal}</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select><br/><br/>
                <button onClick={this.increment}>+</button>
                &nbsp;
                <button onClick={this.decrement}>-</button>
                &nbsp;
                <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>
                &nbsp;
                <button onClick={this.incrementAsync}>异步加</button>
            </div>
        )
    }
}

export const CountContainer = connect(
    state => ({
        count: state.countReducer,
        personTotal: state.personReducer.length
    }),
    {
        increment: createIncrementAction,
        decrement: createDecrementAction,
        incrementAsync: createIncrementAsyncAction
    }
)(Count)

containers/person/index.jsx

import React, {Component} from 'react';
import {nanoid} from "nanoid"
import {connect} from "react-redux";
import {createAddPersonAction} from "../../redux/actions/person"


class Person extends Component {
    addPerson = () => {
        const name = this.nameNode.value;
        const age = this.ageNode.value;

        const personObj = {id: nanoid(), name, age};
        console.log(personObj);
        this.props.addOnePerson(personObj);
        this.nameNode.value = "";
        this.ageNode.value = "";
    }

    render() {
        return (
            <div>
                <h1>我是person组件</h1>
                <h1>上方组件的和为：{this.props.sum}</h1>
                <input ref={c => this.nameNode = c} type="text" placeholder="输入名字"/>
                <input ref={c => this.ageNode = c} type="text" placeholder="输入年龄"/>
                <button onClick={this.addPerson}>添加</button>
                <ul>
                    {this.props.person.map((item) => {
                        return (<li key={item.id}>名字：{item.name}----年龄:{item.age}</li>)
                    })}
                </ul>
            </div>
        )
    }
}

export const PersonContainer = connect(
    state => ({
        person: state.personReducer,
        sum: state.countReducer
    }),//映射状态
    {addOnePerson: createAddPersonAction}
)(Person)

redux/actions/count.js

import {INCREMENT, DECREMENT} from "../constant";
import store from "../store";

export const createIncrementAction = data => ({type: INCREMENT, data})
export const createDecrementAction = data => ({type: DECREMENT, data})

export const createIncrementAsyncAction = (data, time) => {
    return () => {
        setTimeout(() => {
            store.dispatch(createIncrementAction(data))
        }, time)
    }
}

redux/actions/person.js

import {ADD_PERSON} from "../constant";

//创建增加一个人的动作对象
export const createAddPersonAction=personObj=>({type:ADD_PERSON,data:personObj})

redux/reducers/count.js

import {INCREMENT,DECREMENT} from "../constant";

function countReducer(preState = 7, action) {
    console.log(preState, action);
    const {type, data} = action;
    switch (type) {
        case INCREMENT://加
            return preState + data;
        case DECREMENT://减
            return preState - data;
        default:
            return preState
    }
}

export default countReducer

redux/reducers/person.js

import {ADD_PERSON} from "../constant"

export default function personReducer(prevState = [{id: "001", name: "tom", age: 12}], action) {
    const {type, data} = action;
    switch (type) {
        case ADD_PERSON:
            return [data, ...prevState];
        default:
            return [...prevState]
    }
}

redux/reducers/index.js：用于汇总多个reducer

//该文件用于汇总所有reducer
//引入combineReducers，用于汇总对个reducer
import {combineReducers} from "redux";

import countReducer from "./count";
import personReducer from "./person";
//合并reducer，保存的总状态是一个对象
const allReducer = combineReducers({
    countReducer, personReducer
})
export default allReducer;

redux/costant.js

export const INCREMENT = "increment";
export const DECREMENT = "decrement";
export const ADD_PERSON="addPerson"

redux/store.js

/*该文件专门用于暴露一个store对象，整个应用只有一个store对象*/

//1、引入createStore，专门用于创建redux中最为核心的store对象,applyMiddleware:执行中间件
import {createStore, applyMiddleware} from "redux";
//可以在浏览器中使用插件观察redux的状态变化
import {composeWithDevTools} from "redux-devtools-extension";
//2、引入汇总后的reducer
import allReducer from "./reducers";
//3、引入redux-thunk，用于支持异步action
import thunk from "redux-thunk";
//4、暴露store
export default createStore(allReducer, composeWithDevTools(applyMiddleware(thunk)));

App.js

import {CountContainer} from "./containers/count";
import {PersonContainer} from "./containers/person";
import './App.css';

function App() {
    return (
        <div className="App">
            <CountContainer/>
            <hr/>
            <PersonContainer/>
        </div>
    );
}
export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import store from "./redux/store";
import {Provider} from "react-redux"
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    /*Provider包裹App,Provider让所有组件都可以得到state数据*/
    <Provider store={store}>
        <App/>
    </Provider>
);
学习前端的渣渣
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
React - redux 使用（由浅入深）
技术共享，共同进步！
12-06 6409
React - redux 使用（由浅入深）
react17+redux+react-router-dom实现路由拦截登录
qq_21976063的博客
06-21 894
创建全局redux store实例 import { createStore, combineReducers, applyMiddleware } from 'redux' import logger from 'redux-logger' import storage from '../storage' import { authenticatedSuccess } from '../utils/session' const storageUserInfo: UserInfoType = storag
Redux和react-redux和@reduxjs/toolkit
最新发布
A_fork的博客
04-16 682
这篇我要分享的内容是关于Redux和@reduxjs/toolkit的知识，希望能让大家通过我这篇文章，能更好的对redux有一个更深入的了解！！！
React状态管理Redux
qq_39593914的博客
04-02 1035
React状态管理Redux 一、redux基本了解 1.简述 ​ 集中式管理react应用中多个组件 共享 的状态，redux是一个专门用于做 状态管理 的JS库(不是react插件库)。 2.工作原理 3.三个核心概念 a. action 1.表述动作的对象(就是一个js对象) 2.包含两个属性 type: 值为字符串，标识动作类型 data: 值为任意类型 3.例子: {type:'ADD_NUMBER',data:9} b.reducer 1.初始化状态，加工状态 2.是一个纯函数，根
React学习计划-React16--redux使用与介绍
我愿化作繁星
12-27 1931
gitee。
对 React 状态管理的理解及方案对比
qq_43641110的博客
06-28 1434
简单来说来说，“状态管理” 就是为了解决组件间的 “跨级” 通信。一个组件需要和另一个组件共享状态一个组件需要改变另一个组件的状态。
react-redux-router-assignment：使用React Router的React-Redux计算器分配
02-14
$ cd react-redux-router-assignment-jia-von $ cd react-calculator-assignment $ npm install $ npm start 用法 进入浏览器，输入“ localhost：3000”，查看网页。 截屏 参考： MDN Web文档
react-redux-ts：React样板
02-06
在"react-redux-ts"项目中，这三个强大的技术被结合在一起，创建了一个模板，帮助开发者快速启动基于React、Redux和TypeScript的项目。 **React与Redux的结合** 1. **React组件结构**：React组件是可重用的代码块...
react-router4-redux-minidemo:react-router4-redux-minidemo 的最小实践
05-16
总之，“react-router4-redux-minidemo”项目是一个很好的学习资源，它涵盖了React应用中的重要组成部分——路由管理和状态管理。通过研究这个项目，开发者可以深入理解如何在React应用中有效地组织和管理复杂的交互...
react-native-redux-async-storage
05-04
React本机+ Redux + AsyncStorage 一个简单的示例项目，使用React Native中的Redux和AsyncStorage提供状态管理。它是如何工作的 ？ npm安装npm运行android或npm运行ios
react-react-redux：使用React Hooks和Proxy的React Redux绑定
02-05
它提供了useTrackedState，它可以跟踪render中状态的使用，它最初是在此repo中提出的。 ：该项目将为useTrackedState提供React Context。 v1.6提供了createTrackedSelector，它将从useSelector创建useTrackedState...
react-redux登录时将数据存入store,在其他页面获取数据
u013455430的专栏
03-01 7672
登录组件的目录结构 登录调用函数，调用action,将表单数据传过去 调用action，调用接口传入数据 通过dispatch函数，调用reducer将数据传入store 然后使用调试工具redux-devtools可以看到当前多了token的节点 接下来是在其他页面获取token 只需要将state的数据取出来，连接到当前的组件的prop属性 ...
「前端」使用react-router+redux实现项目中的登录校验
Jack's Blog
08-04 1140
**实现原理：**在react-router配置中，加入登录权限验证，若redux中保存了登录信息，则使用<Redirect />组件，重定向至首页，否则，重定向至登录界面。 ...
react-redux的简单使用
xiaohesong
11-02 3736
正式接触react应该有两个月了,项目开始也有一个月了, 开始新项目的时候就没有打算使用redux,因为感觉学习这个的成本挺高. 这两天,项目第一版已经出来了,昨天下午有时间就抓紧时间看看redux相关的东西,大致有个了解,然后今天就照葫芦画瓢,把一个模块给整理了下,换成了redux. 在这里记录下使用,以备后需.react-redux使用前得需要安装npm i --save react-re
react项目实现登录注册
Twinkle的博客
11-05 1万+
eact项目中实现登录注册简单粗暴感悟 全局安装react官方推荐脚手架 create-react-app npm install create-react-app -g 创建react项目 create-react-app react-login-register 进入项目并运行 npm start image.png 安装此demo中各种依赖 npm i...
react项目实战二 登录注册页面的完成
热门推荐
TH226的专栏
10-14 1万+
1、首先是新建项目，并引入相关依赖 新建项目参考博客 https://blog.csdn.net/TH226/article/details/83014317 相关库： npm install redux --save npm run eject 展示出所有配置 npm install express --save npm install -g nodemon //每次修改之后不需要手动重启s...
React中的状态管理
精通前端技术，了解后端接口
11-01 2394
当谈到前端开发中的状态管理时，React是一个备受推崇的选择。React的状态管理机制被广泛应用于构建大型、复杂的应用程序，它提供了一种优雅且高效的方式来管理组件之间的数据流。在本博客中，我们将探讨React中的状态管理及其相关概念。React的状态管理机制为开发者提供了强大且灵活的工具，使得构建复杂应用程序变得更加简单和高效。无论是本地状态管理还是全局状态管理，React都可以满足各种需求，并帮助我们构建出优秀的前端应用。
React-redux
探鱼不是鱼
10-31 3129
redux 起源 2014年 Facebook 提出了 Flux 架构的概念，采用 单向数据流 思想。 2015年，Redux 出现，将 Flux 与 函数式编程 结合一起，很短时间内就成为了最热门的状态管理架构。 Redux 概述 yarn add redux Redux 是 JavaScript 应用的可预测状态容器，用来集中管理状态。 特点：集中管理、可预测、易于测试、易于调试、强大的中间件机制满足你所有需求。 注意：redux 是一个独立于 react 的库，可以配合任何 UI 库/框架
【react框架】告别过去，现在的react-redux状态管理库既好理解又好用！
庞囧的博客
08-07 802
React的状态管理库一开始是个第三方库，叫做Redux。后来Facebook发现这个库的使用量很大，于是官方就也出了个功能一样的库叫做react-redux。这就是原本Redux和react-redux的关系。我之前使用过类组件时期的Redux、函数组件初期的Redux，发现都特别难用，哪些简化Redux理解和操作的第三方库也不是那么好用。对应的调试工具还是类似vsconsole那种入侵代码的库。整体和当时的VueX对比，使用体验还是差很多的。
react-native-redux-router
04-12
react-native-redux-router是一个用于在React Native应用中管理路由和状态的库。它结合了React Native、Redux和React Navigation，提供了一种方便的方式来处理应用程序的导航和状态管理。 下面是一个简单的示例，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值