【React】react学习笔记13-Redux（部分文案摘抄自官网）

最新推荐文章于 2022-12-06 14:04:01 发布

the_fool_

最新推荐文章于 2022-12-06 14:04:01 发布

阅读量154

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/the_fool_/article/details/102601874

版权

React 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

官网：

https://www.redux.org.cn/

目的：

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。 (如果你需要一个 WordPress 框架，请查看 Redux Framework。)

可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。不仅于此，它还提供超爽的开发体验，比如有一个时间旅行调试器可以编辑后实时预览。

Redux 除了和 React 一起用外，还支持其它界面库。它体小精悍（只有2kB，包括依赖）。

三大原则：

三大原则

Redux 可以用这三个基本原则来描述：

单一数据源

整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。

这让同构应用开发变得非常容易。来自服务端的 state 可以在无需编写更多代码的情况下被序列化并注入到客户端中。由于是单一的 state tree ，调试也变得非常容易。在开发中，你可以把应用的 state 保存在本地，从而加快开发速度。此外，受益于单一的 state tree ，以前难以实现的如“撤销/重做”这类功能也变得轻而易举。

State 是只读的

唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

这样确保了视图和网络请求都不能直接修改 state，相反它们只能表达想要修改的意图。因为所有的修改都被集中化处理，且严格按照一个接一个的顺序执行，因此不用担心 race condition 的出现。 Action 就是普通对象而已，因此它们可以被日志打印、序列化、储存、后期调试或测试时回放出来。

使用纯函数来执行修改

为了描述 action 如何改变 state tree ，你需要编写 reducers。

Reducer 只是一些纯函数，它接收先前的 state 和 action，并返回新的 state。刚开始你可以只有一个 reducer，随着应用变大，你可以把它拆成多个小的 reducers，分别独立地操作 state tree 的不同部分，因为 reducer 只是函数，你可以控制它们被调用的顺序，传入附加数据，甚至编写可复用的 reducer 来处理一些通用任务，如分页器。

就是这样，现在你应该明白 Redux 是怎么回事了。

下载：

npm install --save redux

使用：

如上图，state存在于顶层组件Page中，组件从Store中获取state数据。

更新数据时将新数据存放至Action，使用API的Dispacher转发请求更新Store。

demo如下：

reducers:

/**
 * reducers
 * 通过 reducers 作为参数 构建 Store 对象
 * @param state  原来的状态对象
 * @param action 实际操作对象，里面包含待更新的新值以及操作类型等信息。eg：{event:'ADD',data:100}
 */
export function count(state=0 ,action) {
    let val=action.data;
    return val;

}

顶层组件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Main from './components/Redux/Mian';
import * as serviceWorker from './serviceWorker';

//引入redux
import {createStore} from 'redux';
//引入reducers（上面的代码）
import {count}  from './components/reduxs/reducers'
//创建store对象
const store = createStore(count)
//监听状态改变
store.subscribe(() =>
    console.log("状态被改变",store.getState())
);
//将store传入下层组件
ReactDOM.render(<Main store={store} />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

操作store对象的下层组件：

import React,{Component} from 'react';



export default class Main  extends Component{
    constructor(props){
        super(props);
        //初始化组件中Action的值为：{type:'in',data:0}
        this.props.store.dispatch({type:'in',data:0})
    }

    add=()=>{
        //获取state的值
        let val = this.props.store.getState();
        val=val+1;
        console.log(val)
        //更新state的值
        this.props.store.dispatch({type:'in',data:val})

    }

    render() {

        return (
            <div>
                <button onClick={
                    () => {
                        this.add()
                    }
                }>Click</button>

            </div>
        )
    }

}

点击效果：