redux核心步骤

iKcamp 发布于2019-08-23 13:59 / 1551人阅读

摘要：实现步骤数据和控制修改后的数据初始化和通过获取执行监听数据变化监听数据变化重新渲染页面通过观察者模式监听数据变化，避免没有状态改变的频繁渲染首次渲染页面示例数据和控制修改封装起来覆盖原对象初始化增改删删除特定下标用户参考文献小书

概念

redux是一种架构模式，可以和react、vue结合使用。

解决的问题

优雅地修改共享数据状态，避免状态在父子组件的连锁改动（子组件多的话改起来麻烦）及外部改动造成的不必要（难以排除）问题，所以所有的改动强横通过一个方法（dispatch）修改。

实现步骤

//state(数据)和action(控制修改)后的数据
function reducer (state, action) {
    /!* 初始化 state 和 switch case *!/
}

// 通过reducer获取state
// 执行action
// 监听数据变化
const store = createStore(reducer)

// 监听数据变化重新渲染页面
// 通过观察者模式监听数据变化，避免没有状态改变的频繁渲染
store.subscribe(() => renderApp(store.getState()))

// 首次渲染页面
renderApp(store.getState())

示例

const usersReducer = (state, action) => {
    if (!state) return [];
    switch (action.type) {
        case "ADD_USER":
            return [...state, action.user]
        case "DELETE_USER":
            return [...state.slice(0, action.index), ...state.slice(action.index + 1)]
        case "UPDATE_USER":
            let user = {
                ...state[action.index],
                ...action.user,
            }
            return [
                ...state.slice(0, action.index),
                user,
                ...state.slice(action.index + 1),
            ]
        default:
            return state
    }
}
//state(数据)和dispatch(控制修改)封装起来
function createStore (reducer) {
    let state = null
    const listeners = []
    const subscribe = (listener) => listeners.push(listener)
    const getState = () => state
    const dispatch = (action) => {
        state = reducer(state, action) // 覆盖原对象
        // console.log(listeners)
        listeners.forEach((listener) => {
            // console.log(listener)
            listener()

        })
    }
    dispatch({}) // 初始化 state
    return { getState, dispatch, subscribe }
}
const store = createStore(usersReducer);
console.log(store.getState());
//增
store.dispatch({
    type: "ADD_USER",
    user: {
        username: "Lucy",
        age: 12,
        gender: "female"
    }
});
console.log(store.getState());
//改
store.dispatch({
    type: "UPDATE_USER",
    index: 0,
    user: {
        username: "Tomy",
        age: 12,
        gender: "male"
    }
});
console.log(store.getState());
//删
store.dispatch({
    type: "DELETE_USER",
    index: 0 // 删除特定下标用户
});
console.log(store.getState());

参考文献 React.js 小书

云服务器 GPU云服务器 Redux redux源码 redux-saga react-redux

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99889.html

Redux系列02：一个炒鸡简单的react+redux例子

摘要：前言在系列从一个简单例子了解里面，我们已经对的核心概念做了必要的讲解。接下来，同样是通过一个简单的例子，来讲解如何将跟应用结合起来。接下来就看实际例子，一个简单到不存在实用价值的。这部分会在后续展开前言在《Redux系列01：从一个简单例子了解action、store、reducer》里面，我们已经对redux的核心概念做了必要的讲解。接下来，同样是通过一个简单的例子，来讲解如何将...

hidogs 2019-08-19 17:17 评论0 收藏0
Redux概念之一: Redux简介

摘要：应用这说明并不是单指设计给用的，它是独立的一个函数库，可通用于各种应用。在数据流的最后，要触发最上层组件的，然后进行整体的重新渲染工作。单纯在的对象上是没有办法使用，要靠额外的函数库才能这样作，这是一定要使用类似像这种函数库的主要原因。 Redux的官网中用一句话来说明Redux是什么: Redux是针对JavaScript应用的可预测状态容器这句话虽然简短，其实是有几个涵义的: ...

cjie 2019-08-20 13:59 评论0 收藏0
react之redux状态管理

摘要：传统框架的缺陷传统框架的缺陷模型视图控制器的缩写即视图用户看到并与之交互的界面。即模型是管理数据很多业务逻辑都在模型中完成。在的三个部件中，模型拥有最多的处理任务。所有的状态，保存在一个对象里面唯一数据源。1、传统MVC框架的缺陷模型(model)－视图(view)－控制器(controller)的缩写 V即View视图：用户看到并与之交互的界面。 M即Model模型是管理数...

J4ck_Chan 2021-11-19 11:29 评论0 收藏0
redux原来如此简单

摘要：是状态容器，提供可预测化的状态管理。一般我们会使用一个常量来表示对应的值。作为纯函数，内部不建议使用任何有副作用的操作，比如操作外部的变量，任何导致相同输入但输出却不一致的操作。结合，其他类库，开发步骤莫不如此。 Redux 是 JavaScript 状态容器，提供可预测化的状态管理。那什么是可以预测化，我的理解就是根据一个固定的输入，必然会得到一个固定的结果。 redux是专门为...

wuyumin 2019-08-23 11:50 评论0 收藏0
Redux异步中间件

摘要：是官方文档中用到的异步组件，实质就是一个中间件，简单来说就是一个封装表达式的函数，封装的目的是延迟执行表达式。这时我们需要对一般异步中间件进行处理。曾经前端的革新是以Ajax的出现为分水岭，现代应用中绝大部分页面渲染会以异步流的方式进行。在Redux中，如果要发起异步请求，最合适的位置是在action creator中实现。但我们之前了解到的action都是同步情况，因此需要引入中间...

wums 2019-08-22 16:09 评论0 收藏0