Redux与React-Redux实战：解耦状态管理

108 浏览量更新于2024-09-01 收藏 155KB PDF 举报

Redux 是一种用于管理复杂 JavaScript 应用程序状态的架构模式，它解决了单页应用中状态管理的难题。在单页应用中，随着页面的复杂度增加，状态管理变得尤为重要，因为状态可能涉及多种数据源，如服务器响应、缓存、本地生成数据等，以及UI的各种交互状态，如路由、选中的选项和加载指示器。传统的状态管理可能导致状态的混乱，因为一个组件状态的变化可能引发一系列连锁反应，导致难以追踪的状态更新过程。这种混乱在需要更新优化、服务端渲染和路由跳转前数据预加载等高级功能时尤为明显，对开发者来说，问题排查和新功能添加变得困难重重。 Redux 通过将应用程序的状态视为单一来源（store），使用可组合的纯函数（reducers）来更新状态，以及action对象作为状态改变的触发器，有效地分离了变化（更改）和异步逻辑。这有助于提高代码的可预测性和可维护性。 Redux的核心组件包括： 1. **createStore**: 这是Redux提供的核心函数，用于创建一个store。它接收一个reducer作为参数，这个reducer是一个纯函数，接收当前状态(state)和一个action，返回新的状态。createStore还提供了dispatch方法，用于发送action到store，从而触发状态更新。在提供的示例项目中，你可以看到以下结构： - `Demo`文件夹包含了`actionCreate.js`（定义action）、`Demo.jsx`（可能是一个React组件，与Redux集成）、`react-redux.js`（可能是一个引入Redux的入口点）、`reducer.js`（处理action以更新状态的函数）、`redux.js`（配置store的文件）、`style.css`（样式表）和`thunk.js`（可选的中间件，用于处理异步操作）。 - `App.js`可能是项目的入口点，这里会通过`connect`函数或`Provider`组件将Redux store与React组件连接起来，以便访问和管理状态。当你开始使用Redux时，你需要创建一个reducer来定义初始状态和状态更新规则，创建store并提供reducer，然后通过dispatch action来触发状态变化。Redux 提供了清晰的API，使得状态管理更易于理解和调试，即使面对复杂的前端需求也能保持良好的组织结构和控制。通过将状态逻辑抽离到Redux中，React开发者可以专注于视图层，而无需担心底层状态管理的细节，从而提高了整个系统的可维护性和可测试性。

创建全局状态 state；

创建监听队列；

针对监听队列，新增函数用于将指定监听对象添加到队列中；

在函数 dispatch 中执行 reducer 将返回值作为新的 state, 同时依次执行监听对象；

默认执行一次 dispatch 给定一个 type 相对唯一的 action，目的是为了匹配 reducer 的默认状态值，从而实现对 redux state

的初始化；

在组件 Demo 通过在函数 update 使用 this.setState 将全局 state 保存到 react state 中，并将函数 update 添加到监听队列

中；从而使得当我们一旦试图通过 dispatch 修改全局状态时，能够及时更新 react state 最终触发 react 生命周期 render；

在 react 生命周期 componentDidMount 中我们除了将 update 添加到监听队列以外，还需手动执行一次 update 其主要目的就

是为了首次初始化 react state;

// Demo.jsx

import React from 'react';

import { changeAge, changeUser } from './actionCreate';

import { reducer } from './reducer';

import './style.css';

let state;

const listeners = [];

const subscribe = (listener) => {

listeners.push(listener);

}

const dispatch = (action) => {

state = reducer(state, action);

console.log(state);

listeners.forEach(v => v());

}

dispatch({type: '%$&HJKAJJHDJHJ'});

export default class Demo extends React.Component{

state = {user: 'xxx', age: 'xxx'};

componentDidMount(){

subscribe(this.update);

this.update();

}

update = () => {

this.setState(state);

}

onChange = (e) => {

dispatch(changeUser(e.target.value));

}

onClick = () => {

dispatch(changeAge());

}

render(){

return (

<div>

<p>user: {this.state.user}, age: {this.state.age}</p>

user:

</div>

);

}

1.3 API createStore 的实现的实现

其实上文的代码中对于 createStore 的实现原理已经基本描述清除，下面我们只是单纯的对代码进行了简单的封装；当然为了

能够获取到 state 我们专门增加了一个函数 getState 来实现它；

createStore 函数实现

// redux.js

剩余12页未读，继续阅读

weixin_38685793

粉丝: 5
资源: 865

Redux与React-Redux实战：解耦状态管理

react-用于学习目的的简单redux和reactredux实现

仿小米有品React_React-redux_React-Router_Hooks.zip

react-native-starter:react，react-native，redux，react-redux和react-navigation。 基本模板

Counter-React-Redux:用React，Redux，React-Redux，Redux-Toolkit和React-Bootstrap制成的计数器

learning-react:React、Redux、react-redux、react-router、redux-sagas 学习

react-redux-spa-boilerplate:SPA样板可与react，react-redux，react-router，redux-form，redux-promise一起使用

react-webpack-typescript-template:一个react模板，使用react，react-dom，webpack，typescript，redux，react-redux，redux-logger，redux-thunk，redux-promise，connected-react-router ..

react-redux-hook-demo:带有钩子api，redux，react-redux，redux-saga的最新功能

React-Redux-Blog-Post-App:一个由React-Redux，react-router v4和redux-form v6完成的小型Blog Post应用

website-react-webapp:react开发的移动端项目,react-router-dom、react-redux、redux、react-redux-thunk等

最新资源

react-native-starter:react，react-native，redux，react-redux和react-navigation。基本模板