Redux学习手册—详述基本概念及基本使用等原理（附详细案例代码解析过程）

最新推荐文章于 2024-05-17 00:57:56 发布
最新推荐文章于 2024-05-17 00:57:56 发布
阅读量333 收藏 1
点赞数 1
分类专栏： # Redux学习手册 文章标签： react Redux redux chorme redux react redux详述
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013946061/article/details/107206592
版权

文章目录

1. 重点提炼

  • redux
    • 管理应用数据（它提供了一套管理的模式）
    • 纯函数（便于测试和重构）
  • 规范
    • store：仓库
    • state：数据
    • reducer：数据操作
    • action：动作
      • dispatch：派发

2. Redux

注意Redux和React是一点关系都没有的，它其实是js当中的一个状态（数据）管理的库。

2.1 知识点

  • 状态管理器
  • state 对象
  • reducer 纯函数
  • store 对象
  • action 对象
  • combineReducers 方法
  • react-redux
  • provider 组件
  • connect 方法
  • Redux DevTools extension 工具
  • 中间件 - middleware
  • redux-chunk

2.2 状态（数据）管理

前端应用越来越复杂，要管理和维护的数据也越来越多，为了有效的管理和维护应用中的各种数据，我们必须有一种强大而有效的数据管理机制，也称为状态管理机制，Redux 就是解决该问题的。状态管理即有一定的规则，Redux的基本功能是做数据管理的，但是仅仅把数据存起来再取，就没啥意义了，重点在于数据和管理，得有一定地规则和规范，才能称之为管理。

2.3 Redux

Redux 是一个独立的 JavaScript 状态管理库，与非 React 内容之一

https://www.bootcdn.cn/redux/

官网：https://www.redux.org.cn/

2.3.1 核心概念

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

  • state：存储数据的位置，对象
  • reducer：数据分片（对数据分片、构建基础数据的函数）
  • store：仓库，提供数据存储、管理等操作的对象，state、reducer、action 都是 store 其中一个功能
  • action：提交数据操作请求（这里是不能直接修改state数据的，必须先发送请求才行，如果希望数据被有效管理，则不是任何人可以去修改数据的。就如同React中props传递进来，在组件内部是千万不能修改的，而是由控制数据的这个人去修改，即假如数据存在state中，想要对数据进行操作，必须提前发送请求。发了请求之后，由reducer来决定这个数据，它是构建基础数据的函数，它来维护数据的一些基础的函数。实际上state是由reducer产生的数据，它产生后的数据就会保存在state中，如果想修改数据，则通过action操作。）
  • state、reducer、action均放在store对象中
2.3.1.1 state 对象

通常我们会把应用中的数据存储到一个对象树（Object Tree） 中进行统一管理，我们把这个对象树称为：state （与React中state是一个东西，同样React中的state也得通过setState去修改，它就类似redux中reducer了）

2.3.1.1.1 state 是只读的

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

2.3.1.1.2 通过纯函数修改 state

什么是纯函数？实际就是reducer

2.3.1.1.2.1 纯函数

特点：

  1. 相同的输入永远返回相同的输出
  2. 不修改函数的输入值
  3. 不依赖外部环境状态
  4. 无任何副作用（不做与自己功能无关的事）

使用纯函数的好处

  1. 便于测试
  2. 有利重构
2.3.1.1.3 example01

纯函数可理解为目的很单纯的函数，它不会对传入的参数进行修改，举个例子：

如这就不符合纯函数了，因为其对参数进行了修改。

这样其实不利于测试，其实这样修改参数，实际就代表user1的原数据就没了，比如过来很多天，你想看过去这个变量修改前的值，就没法看了。

redux-demo\1.redux-纯函数.html

    let user1 = {
        id: 1,
        username: 'lisi',
        age: 35
    };
 
    function growUp(user) {
        user.age++;
    }
 
    growUp(user1);

所以我们不能修改参数，把函数改为：返回新对象

相同的输入有相同的输出（伪代码：合并对象）

    let user1 = {
        id: 1,
        username: 'lisi',
        age: 35
    };
 
    function growUp(user) {
        //user.age++;
 
        return {
                ...user,
                {age: user.age+1}
        }
 
    }
 
    growUp(user1);

或者：Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

    let user1 = {
        id: 1,
        username: 'lisi',
        age: 35
    };
 
    function growUp(user) {
        // user.age++;
 
        // return {
        //         ...user,
        //         {age: user.age+1}
        // }
 
        return Object.assign({}, user, {age: user.age + 1});
    }
 
    let user2 = growUp(user1);
    let user3 = growUp(user2);
 
    console.log(user1);
    console.log(user2);
    console.log(user3);

image-20200608162258161

参考：https://github.com/6xiaoDi/blog-Redux-Novice/tree/a0.01
Branch：branch1

commit description：a0.01-example01（redux-纯函数）

tag：a0.01

2.3.1.2 Reducer 函数
function todo(state, action) {
  switch(action.type) {
    case 'ADD':
      return [...state, action.payload];
      break;
    case 'REMOVE':
      return state.filter(v=>v!==action.payload);
      break;
    default:
      return state;
    }
}

上面的 todo 函数就是 Reducer 函数

  1. 第一个参数是原 state 对象
  2. Reducer 函数不能修改原 state，而应该返回一个新的 state
  3. 第二参数是一个 action 对象，包含要执行的操作和数据
  4. 如果没有操作匹配，则返回原 state 对象
2.3.1.3 action 对象

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

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

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

2.3.1.4 Store 对象

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

2.3.1.4.1 Redux.createStore 方法
let store = Redux.createStore((state, action) => {
  // ...
}, []);

todo

用户操作数据的 reducer 函数

[]

初始化的 state

我们也可以使用 es6 的函数参数默认值来对 state 进行初始化

let store = Redux.createStore( (state = [], action) => {
  // ...
} )
2.3.1.4.2 getState() 方法

通过 getState 方法，可以获取 Store 中的 state

store.getState();
2.3.1.4.3 example02

Store 对象——创建仓库、获取state

2.3.1.4.3.1 example02-1

创建仓库方法：构建一个用来存储数据，提供数据操作的仓库

Redux.createStore : 创建仓库的函数

  • 第一个参数：reducer 函数，修改数据的方法
  • 第二个参数：仓库中存储的初始化数据，存什么？

redux-demo\2.redux基础.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<script src="./redux.min.js"></script>
<script>
 
 
<!--利用redux来管理和维护数据-->
    let users = [
        {
            id: 1,
            username: 'zs',
            age: 35
        },
        {
            id: 2,
            username: 'ls',
            age: 30
        }
    ];
 
    let store = Redux.createStore( function () {
 
    }, users)
 
    console.log(store);
</script>
</body>
</html>

操作数据的方法：

image-20200608170851308

获取仓库数据：

第一个参数是函数，它的作用是初始化，定义数据如何变化的。

    let store = Redux.createStore( function () {
 
    }, users)
 
    console.log(store);
    console.log( store.getState() );

返回的是undefined

image-20200608171013063

第一个参数：reducer 函数，修改数据的方法，如何操作，操作的结果？访问数据的时候，返回什么，数据变化如何进行？

创建仓库的第一个参数，即该函数其实有两个参数，该函数的返回值就是仓库中state的最新的数据。（刚才我们没有返回所有是undefined）

该方法会在仓库创建的时候默认调用一次。

第一个参数函数同时它会把第二个参数作为参数，传递给第一个参数函数，这个参数函数执行完毕的返回值就是该仓库最新的数据。

参考：https://github.com/6xiaoDi/blog-Redux-Novice/tree/a0.02-1
Branch：branch1

commit description：a0.02-1-example02-1（redux基础——获取仓库数据，但state为undefined）

tag：a0.02-1

2.3.1.4.3.2 example02-2

构建一个用来存储数据，提供数据操作的仓库

Redux.createStore : 创建仓库的函数

  • 第一个参数：reducer 函数，修改数据的方法，如何操作，操作的结果？访问数据的时候，返回什么，数据变化如何进行？该函数的返回值就是仓库中state的最新的数据，该方法会在仓库创建的时候默认调用一次。
  • 第二个参数：仓库中存储的初始化数据，存什么？
<!--利用redux来管理和维护数据-->
    let users = [
        {
            id: 1,
            username: 'zs',
            age: 35
        },
        {
            id: 2,
            username: 'ls',
            age: 30
        }
    ];

    function reducer(state, action) {
        // state : 上一次的 数据    action：动作
        console.log('执行了', action);
        return state;
    }

    let store = Redux.createStore( reducer, users );

    console.log(store);
    console.log( store.getState() );

{type: "@@redux/INIT4.s.h.2.t.b"}是创建仓库(Redux.createStore)首次调用传进来的，是默认传的

createStore => reducer(users, {type: “@@redux/INITg.w.0.g.1.a”}) => return state => 现在仓库里面的数据。

image-20200608172119794

参考：https://github.com/6xiaoDi/blog-Redux-Novice/tree/a0.02-2
Branch：branch1

commit description：a0.02-2-example02-2（redux基础——获取仓库数据及原理）

tag：a0.02-2

2.3.1.4.4 dispatch() 方法

通过 dispatch 方法，可以提交更改

store.dispatch({
  type: 'ADD',
  payload: 'zs'
})
2.3.1.4.5 action 创建函数

action 是一个对象，用来在 dispatch 的时候传递动作和数据，我们在实际业务中可能会中许多不同的地方进行同样的操作，这个时候，我们可以创建一个函数用来生成（返回）action

function add(payload) {
  return {
    type: 'ADD',
    payload
  }
}
 
store.dispatch(add('zs'));
store.dispatch(add('ls'));
...
2.3.1.4.6 subscribe() 方法

可以通过 subscribe 方法注册监听器（类似事件），每次 dispatch action 的时候都会执行监听函数，该方法返回一个函数，通过该函数可以取消当前监听器。刚刚代码中，我们每次调用dispatch方法，就console一下，很麻烦，可以写进监听器中进行优化。

let unsubscribe = store.subscribe(function() {
  console.log(store.getState());
});
unsubscribe();
2.3.1.4.7 example03

dispatch方法：当我们调用 dispatch 的时候其实就是执行的 reducer函数

createStore=> store.dispatch({type: “@@redux/INITg.w.0.g.1.a”}}) 默认情况下

2.3.1.4.7.1 example03-1
<!--利用redux来管理和维护数据-->
    let users = [
        {
            id: 1,
            username: 'zs',
            age: 35
        },
        {
            id: 2,
            username: 'ls',
            age: 30
        }
    ];
 
 
    function reducer(state, action) {
        // state : 上一次的 数据    action：动作
        console.log('执行了', action);
        return state;
    }
 
    let store = Redux.createStore( reducer, users );
 
    console.log(store);
    console.log( store.getState() );
 
    store.dispatch({
        type: 'ADD', // 名字随便取
        payload: {   // 需要修改的数据（增量数据）
            id: 3,
            username: 'wangwu',
            age: 30
        }
    });

dispatch：当我们调用dispatch的时候其实就是执行的 reducer 函数

createStore =>(等同于) store.dispatch({type: “@@redux/INITg.w.0.g.1.a”}})

image-20200608173917373

参考：https://github.com/6xiaoDi/blog-Redux-Novice/tree/a0.03-1
Branch：branch1

commit description：a0.03-1-example03-1（redux基础——dispatch）

tag：a0.03-1

2.3.1.4.7.2 example03-2

reducer函数通过action参数来分辨，现在想做什么事情？我们根据action的值来做一些判断，做相应的操作。经常根据action.type做一些对应的操作。

<!--利用redux来管理和维护数据-->
    let users = [
        {
            id: 1,
            username: 'zs',
            age: 35
        },
        {
            id: 2,
            username: 'ls',
            age: 30
        }
    ];

    function reducer(state, action) {
        // state : 上一次的 数据    action：动作
        console.log('执行了', action);

        switch (action.type) {
            case 'ADD':
                return [...state, action.payload];
            default:
                // 没做任何操作，就返回仓库上一次的状态
                return state;
        }
    }

    let store = Redux.createStore( reducer, users );

    console.log(store);
    console.log( store.getState() );

    store.dispatch({
        type: 'ADD', // 名字随便取
        payload: {   // 需要修改的数据（增量数据）
            id: 3,
            username: 'wangwu',
            age: 30
        }
    });

    console.log( store.getState() );

image-20200608174750526

参考：https://github.com/6xiaoDi/blog-Redux-Novice/tree/a0.03-2
Branch：branch1

commit description：a0.03-2-example03-2（redux基础——reduce函数使用action参数）

tag：a0.03-2

2.3.1.4.7.3 example03-3

千万不要如下返回，因为我们要保持仓库的数据与上次的数据完全隔离的。（保持纯函数特性）

<!--利用redux来管理和维护数据-->
    let users = [
        {
            id: 1,
            username: 'zs',
            age: 35
        },
        {
            id: 2,
            username: 'ls',
            age: 30
        }
    ];

    function reducer(state, action) {
        // state : 上一次的 数据    action：动作
        console.log('执行了', action);

        switch (action.type) {
            case 'ADD':
                // 千万不要如下返回，因为我们要保持仓库的数据与上次的数据完全隔离的
                state.push(action.payload);
                return state;
            // return [...state, action.payload];
            default:
                // 没做任何操作，就返回仓库上一次的状态
                return state;
        }
    }

    let store = Redux.createStore( reducer, users );

    console.log(store);
    console.log( store.getState() );

    store.dispatch({
        type: 'ADD', // 名字随便取
        payload: {   // 需要修改的数据（增量数据）
            id: 3,
            username: 'wangwu',
            age: 30
        }
    });

    console.log( store.getState() );

导致两次数据一样了，就追踪不到上次的数据了。

image-20200608175032032

参考：https://github.com/6xiaoDi/blog-Redux-Novice/tree/a0.03-3
Branch：branch1

commit description：a0.03-3-example03-3（redux基础——reduce函数使用action参数注意的问题）

tag：a0.03-3

2.3.1.4.7.4 example03-4

但每次都这样调用store.dispatch函数，会很繁琐。

\redux-demo\3.action函数.html

我们可以把这个过程封装成函数（其实就是action的工厂函数），这个函数返回一个action。这样方便我们后续代码的复用，否则每次追加数据，都需填写“type”、“payload”，很麻烦，代码也冗余。如果后续修改的添加（添加用户），如将“type”改为“ADD_USER”等，你得到处去改“type”，其实这样代码的耦合度非常高，独立性很差，维护起来很困难。其实这样也非常符合纯函数的特性。

    let users = [
        {
            id: 1,
            username: 'zs',
            age: 35
        },
        {
            id: 2,
            username: 'ls',
            age: 30
        }
    ];


    function reducer(state, action) {

        switch (action.type) {
            case 'ADD':
                return [...state, action.payload];
            default:
                return state;
        }

    }

    let store = Redux.createStore( reducer, users );

    console.log(store);

    console.log( store.getState() );


    function add(payload) {
        return {
            type: 'ADD',
            payload
        }
    }


    store.dispatch(add({
        id: 3,
        username: 'xm',
        age: 30
    }));

    console.log( store.getState() );

    store.dispatch(add({
        id: 3,
        username: 'xh',
        age: 30
    }));

    console.log( store.getState() );

image-20200608180047977

参考：https://github.com/6xiaoDi/blog-Redux-Novice/tree/a0.03-4
Branch：branch1

commit description：a0.03-4-example03-4（action工厂函数封装）

tag：a0.03-4

2.3.1.4.7.5 example03-5

以上我们每次调用store.dispatch后再console，这样很麻烦，我们可以给store添加一个监听器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

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



    let users = [
        {
            id: 1,
            username: 'zs',
            age: 35
        },
        {
            id: 2,
            username: 'ls',
            age: 30
        }
    ];


    function reducer(state, action) {

        switch (action.type) {
            case 'ADD':
                return [...state, action.payload];
            default:
                return state;
        }

    }

    let store = Redux.createStore( reducer, users );

    let unsubscribe = store.subscribe(function() {
        console.log(store.getState());
    });

    // console.log(store);

    // console.log( store.getState() );


    function add(payload) {
        return {
            type: 'ADD',
            payload
        }
    }


    store.dispatch(add({
        id: 3,
        username: 'xm',
        age: 30
    }));

    // console.log( store.getState() );

    store.dispatch(add({
        id: 3,
        username: 'xh',
        age: 30
    }));

    // console.log( store.getState() );


</script>
</body>
</html>

image-20200707135507181

参考：https://github.com/6xiaoDi/blog-Redux-Novice/tree/a0.03-5
Branch：branch1

commit description：a0.03-5-example03-5（加监听器）

tag：a0.03-5

2.3.2 Redux 工作流

UI界面（组件，如Vue、React等）需要数据的时候，就可以从仓库的State中拿数据了，然后展示在UI界面上，当界面上更改数据的时候，不能直接修改State，这里是单向数据流。当需要修改State时，先提交Actions动作，然后匹配Reducers对应的行为（函数）之后再执行，Reducers对应函数的返回值将作为新的State。其实React组件的设计的也是这种单向数据流，如子组件想用父组件数据，从props取数据，但是子组件想修改父组件的数据，它需要调用父组件传递的回调函数才行，也是单向数据流。其实目的就是让数据的修改可控，可追踪到数据的变化。

img

2.3.3 Reducers 分拆与融合

当一个应用比较复杂的时候，状态数据也会比较多，如果所有状态都是通过一个 Reducer 来进行修改的话，那么这个 Reducer 就会变得特别复杂。这个时候，我们就会对这个 Reducer 进行必要的拆分

let datas = {
  user: {},
  items: []
  cart: []
}

我们把上面的 users、items、cart 进行分拆

// user reducer
function user(state = {}, action) {
  // ...
}
// items reducer
function items(state = [], action) {
  // ...
}
// cart reducer
function cart(state = [], action) {
  // ...
}
2.3.3.1 combineReducers 方法

该方法的作用是可以把多个 reducer 函数合并成一个 reducer

let reducers = Redux.combineReducers({
  user,
  items,
  cart
});
 
let store = createStore(reducers);
2.3.3.2 example04

Reducers分拆与融合

2.3.3.2.1 example04-1

如下：这些数据会随着应用的复杂，数据越来越庞大，假设我们的数据非常庞大，封装reducer

    let appData = {
        // 用户数据
        users: [
 
        ],
        // 商品数据
        items: [
 
        ],
        // 购物车数据
        cart: [
 
        ]
    };
 
 
    function reducer(state, action) {
 
        switch (action.type) {
            case 'ADD_USER':
                return {
                    items: state.items,
                    cart: state.cart,
                    users: [...state.users, action.payload]
                };
            default:
                return state;
        }
 
    }
 
    let store = Redux.createStore( reducer, appData );
 
    console.log( store.getState() );
 
    function addUserAction(payload) {
        return {
            type: 'ADD_USER',
            payload
        }
    }
 
    store.dispatch( addUserAction({id: 1, username: 'lisi'}) );
    console.log( store.getState() );

image-20200608225745942

参考：https://github.com/6xiaoDi/blog-Redux-Novice/tree/a0.04-1
Branch：branch1

commit description：a0.04-1-example04-1（复杂数据封装reducer）

tag：a0.04-1

2.3.3.2.2 example04-2

但是如果user里还嵌套其他的内容，这样的话层级会非常得多，reducer返回值设置起来就会非常恶心。我们可以reducer拆开，每个reducer负责自己的模式。

 
    let appData = {
        // 用户数据
        users: [
 
        ],
        // 商品数据
        items: [
 
        ],
        // 购物车数据
        cart: [
 
        ]
    };
 
 
    // state默认是users空数组
    function usersReducer(state = [], action) {
        switch (action.type) {
            case 'ADD_USER':
                return [...state, action.payload];
            default:
                return state;
        }
    }
 
    function itemsReducer(state = [], action) {
        switch (action.type) {
            case 'ADD_ITEM':
                return [...state, action.payload];
            default:
                return state;
        }
    }
 
    function cartReducer(state = [], action) {
        switch (action.type) {
            case 'ADD_CART':
                return [...state, action.payload];
            default:
                return state;
        }
    }
 
    // 拆分后再融合
 
    function reducer(state, action) {
        return {
            users: usersReducer(state.users, action),
            items: itemsReducer(state.items, action),
            cart: cartReducer(state.cart, action)
        }
    }
 
    let store = Redux.createStore( reducer, appData );
 
    console.log( store.getState() );
 
    function addUserAction(payload) {
        return {
            type: 'ADD_USER',
            payload
        }
    }
 
    store.dispatch( addUserAction({id: 1, username: 'lisi'}) );
    console.log( store.getState() );

image-20200608225745942

参考：https://github.com/6xiaoDi/blog-Redux-Novice/tree/a0.04-2
Branch：branch1

commit description：a0.04-2-example04-2（复杂数据封装reducer——分拆）

tag：a0.04-2

2.3.3.2.3 example04-3

鉴于这种需求比较强烈，redux提供了一个方法：

combineReducers => 就是完成了我们上面封装的 myReducer的功能

    let appData = {
        // 用户数据
        users: [
 
        ],
        // 商品数据
        items: [
 
        ],
        // 购物车数据
        cart: [
 
        ]
    };
 

    // state默认是users空数组
    function usersReducer(state = [], action) {
        switch (action.type) {
            case 'ADD_USER':
                return [...state, action.payload];
            default:
                return state;
        }
    }
 
    function itemsReducer(state = [], action) {
        switch (action.type) {
            case 'ADD_ITEM':
                return [...state, action.payload];
            default:
                return state;
        }
    }
 
    function cartReducer(state = [], action) {
        switch (action.type) {
            case 'ADD_CART':
                return [...state, action.payload];
            default:
                return state;
        }
    }
 
    // 拆分后再融合
 
    // function myReducer(state, action) {
    //     return {
    //         users: usersReducer(state.users, action),
    //         items: itemsReducer(state.items, action),
    //         cart: cartReducer(state.cart, action)
    //     }
    // }
  
    let reducer = Redux.combineReducers({
        users: usersReducer,
        items: itemsReducer,
        cart: cartReducer
    });
 
    let store = Redux.createStore( reducer, appData );
 
    console.log( store.getState() );
 
    function addUserAction(payload) {
        return {
            type: 'ADD_USER',
            payload
        }
    }
 
    store.dispatch( addUserAction({id: 1, username: 'lisi'}) );
    console.log( store.getState() );

image-20200608225745942

参考：https://github.com/6xiaoDi/blog-Redux-Novice/tree/a0.04-3
Branch：branch1

commit description：a0.04-3-example04-3（复杂数据封装reducer—Redux.combineReducers）

tag：a0.04-3

2.3.4 小结

以上我们学的redux是原生js写的，比较单一，真正在react中直接用redux，还需要做很多工作。不能直接用，如果直接用会出现很多问题。如数据变化以后，组件更新的问题以及调用等其他问题。

因此react还有一个第三方库，叫react-redux，创建仓库都类似，重点是提供Provider组件，通过这个组件把创建的仓库注入到应用当中，然后就可以在组件当中调用数据，也不是直接就可以调，而是通过connect方法，它类似withRouter，通过connect把组件进行包装。之后组件内部就直接可以调用getState方法及dispatch方法了，因为默认情况组件的props下是没有dispatch方法了，所有通过connect方法向组件props中注入dispatch方法，然后用this.props.dispatch可直接调用就行了。类似非路由组件通过withRouter进行包装，它底下就会location、history等这些对象了。

重点和难点在于异步 action，这里涉及到一个Middleware的redux的中间件。主要解决异步数据更新的问题。



（后续待补充）
溜_x_i_a_o_迪
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
React 之 redux 详解
subsistent的博客
08-19 3520
状态管理是指在应用中维护数据状态的过程。随着应用不断变大，维护和同步数据状态的复杂度也会变得更高，因此状态管理是一个重要的问题。Redux 是一种 JavaScript 库，用于管理应用的全局状态。它的目的是帮助开发者管理和同步应用中的数据状态，以实现组件间的数据共享和通信。Redux 遵循了一种单向数据流的架构模式，将整个应用的状态数据存储在一个全局的状态树（即 store）中，并通过明确的操作，比如 dispatch 一个 action，来修改数据状态。
redux的原理，redux的工作流程，redux的使用
tyxjolin的专栏
03-26 757
Redux 通过一个单一的全局状态存储来简化应用程序的状态管理，并通过严格的规则确保状态的可控性和可预测性。这样一来，我们就能够确保状态的不可变性，并且我们的状态更新操作将始终返回一个新的状态树对象，从而确保我们的应用程序状态始终是可控的和可预测的。在 Redux 中，我们使用纯函数来更新状态树，这可以确保我们的状态更新始终是可预测的和可控的。这可以确保我们的状态更新是可预测的和可控的，并且可以避免一些常见的状态管理问题，例如状态突变和竞态条件。这使得 Redux 的状态更改是可预测的和可控的。
Redux——详解
热门推荐
qq_56989560的博客
06-25 2万+
Redux
Redux基本介绍
一缕阳光@的博客
07-25 2694
Redux基本介绍
一文让你彻底弄懂Redux的基本原理以及其如何在React中使用！
最新发布
计算机小white博客
05-17 1021
本文介绍了 Redux 的基本概念及其在 React 中的具体使用方法。通过构建合理的文件结构，配置 Redux Toolkit 和 React-Redux，实现状态管理。通过 Provider 组件、useSelector 和 useDispatch 钩子，简化了 Redux 与 React 组件的连接。同时，介绍了 Redux Thunk 中间件的使用，帮助处理异步操作，使应用的状态管理更加高效和可维护。
redux详细介绍
yangyanqin2545的博客
01-25 5544
redux详细介绍 1、redux 1、redux是什么？ redux是一个专门做状态管理的js库（不是react插件库） 它可以用在react，angular,vue等项目中，但基本与react配合使用 作用：集中式管理react应用中多个组件共享状态 2、什么情况下使用redux 某个组件的状态，需要让其他组件可以随时拿到（共享） 一个组件需要改变另一个组件的状态（通信） 总体原则：能不用就不用，如果不用比较吃力才考虑使用 3、redux工作流程 二、redux的三个核心概念 1、ation (1)动作
Redux 简介
qq_43505867的博客
12-17 809
然后，一旦收到数据，就会发送另一个 action，该 action 的 data 是请求返回的数据同时也代表 API 操作完成。在这种情况下，要确保返回当前的。在 Redux 中，有一个状态对象负责应用程序的整个状态， 这意味着如果有一个包含十个组件且每个组件都有自己的本地状态的 React 项目，那么这个项目的整个状态将通过 Redux。可以将 Redux action 视为信使，将有关应用程序中发生的事件信息提供给 Redux store， 然后 store 根据发生的 action 进行状态的更新。
记录一篇关于redux-saga的基本使用过程
10-18
本文将详细介绍如何在项目中基本使用 Redux-Saga。 首先，我们需要安装 Redux 和 Redux-Saga。在终端中执行以下命令： ```bash npm install --save redux npm install --save redux-saga ``` 接下来，我们需要...
redux.js详解及基本使用
10-16
Redux我们可以把它理解成一个状态管理器，可以把状态（数据）存在Redux中，以便增、删、改。这篇文章主要介绍了redux.js详解及基本使用,需要的朋友可以参考下
详解关于react-redux中的connect用法介绍及原理解析
12-11
关于react-redux的一个流程图 流程图 connect用法介绍 connect方法声明： connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options]) 作用：连接React组件与 Redux store。 参数说明： ...
redux的介绍、安装、三大核心与执行流程
Gik99的博客
08-19 390
redux的介绍、安装、三大核心与执行流程
Redux详解
个人学习笔记
02-01 2409
1. redux概述 redux是一个用于JavaScript状态容器，提供可与预测化的状态。 redux可以让你构建一致化的应用，运行不同的环境（客户端，服务器，原生应用），并且易于测试。 redux除了与react一起使用外，还支持其他界面库，而且它体积小（只有2KB） 2. redux组成 3. 实现过程 实现点击A组件+号按钮，B页面数字++ 4. 总结 本篇分享是我边看视频边操作再加上文档整理出来一些东西，作为自己的学习笔记，前端小白还未在实际项目运用过，有问题可以提出一起讨论~ ...
Redux的基本使用过程详解
m0_71485750的博客
09-29 1万+
例如上面代码中, 我们封装的动态创建action的函数, 这种动态生成action的函数在项目中可能会有很多个, 而且在其他多个文件中也可能会使用, 所以我们最好是有一个单独的文件夹存放这些动态获取action的函数。例如上面代码中, 我们修改名称多次, 只有传入的action的name属性值不相同, 那么我们可以封装一个函数, 动态的生成action, 这也是开发中一贯的做法。随着应用程序的复杂度增加，我们可以将reducer拆分成多个小的reducers，分别操作不同state tree的一部分;
搞懂redux一篇就够了
weixin_46063007的博客
07-28 1866
学习redux一篇就够了
Redux手把手教学，有这篇就够了
真全栈成长之路~~~
09-02 2829
Redux 是 React 框架下的一款状态管理工具，可以实现多个组件之间的数据共享和传递。学习和掌握 Redux 以及周边生态可以使我们更好的进行 React 项目开发。下面我们就详细的讲述 Redux 在实际项目开发中的使用。
Redux
Ronychen的博客
05-23 1904
一、概述 1.1、概念理解： redux可以理解为就是一个js容器，用于全局的状态管理 1.2、三大核心 单一数据源 整个应用的state被存储在一颗object tree中，并且这个object tree只存在于唯一一个store state是只读的 唯一能改变state的就是action,action是一个用于描述已发生事件的对象,通过store中的dispatch方法来发送action storte.dispatch({type:‘add’}) 使用纯函数（reducer）来执行
Redux 快速上手指南
xiangzhihong8的专栏
05-31 1万+
Redux简介 如果要用一句话来概括Redux，那么可以使用官网的这句话：Redux是针对JavaScript应用的可预测状态容器。此句话虽然简单，但包含了以下几个含义： 可预测性(predictable): 因为Redux用了reducer与纯函数(pure function)的概念，每个新的state都会由旧的state建来一个全新的state。因而所有的状态修改都是”可预测的”。 状态...
Redux 学习系列（一） —— 基础概念入门篇
且听风吟的博客
05-05 1037
`Redux` 是一个可预测的 `JavaScript` 应用状态管理容器，也可以说是一个应用数据流框架。
Redux 中文文档
CannyRunnig的专栏
02-23 709
http://cn.redux.js.org/
四.React全家桶1-redux
09-03
React全家桶是指React框架中的一系列主要工具和库，包括Redux、React-Redux以及相关中间件。在使用React进行开发时，掌握这些工具和原理是非常重要的。首先，我们需要了解Redux。 Redux是一个用于管理应用程序状态...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值