redux和react-redux的简单实现

写在前面

redux简介随着JavaScript单页应用程序开发的复杂性不断增加，JavaScript需要管理的状态比以往任何时候都多。这些状态可能包括服务器响应、缓存的数据、本地生成的尚未保存到服务器的数据，以及用户界面状态，如活动路由、选定的标签、是否显示加载操作或寻呼机等。

管理不断变化的状态非常困难。如果一个模型的变化会引起另一个模型的变化，那么当视图发生变化时，就可能引起相应模型和另一个模型的变化，进而引起另一个视图的变化。直到你不知道发生了什么。什么时候，为什么，状态如何变化都是无法控制的。当系统变得复杂时，很难重现问题或添加新功能。

如果这还不够糟糕，可以考虑一些来自前端开发领域的新需求，比如更新和调优、服务器渲染、路由和跳转前请求数据等等。前端开发人员正在经历前所未有的复杂性。你就这么放弃了吗？当然不是。

在很大程度上，这里的复杂性来自于这样一个事实，即我们总是混淆两个难以澄清的概念：变化和异步。如果我们把两者分开，我们可以做得很好，但是当我们把它们混合在一起时，我们就变得一团糟。有些库，比如React，试图通过在视图级别禁止对DOM的异步和直接操作来解决这个问题。美中不足的是，React仍然将处理状态数据的问题留给了我们自己。redux可以帮助我管理这些状态；

演示演示

Demo结构树config-overrides . jsgit ignorepackage . JSONpackage-lock . JSONpublicfavicon . icoadme . MDsrcapp . jsdemoactioncreate . jsdemo . jsx \\\\\\\\\\\\

首先，我们结合减速器和动作的知识，简单实现开头展示的演示，逐步揭示createStore的奥秘；

1.1准备工作：

创建减速器并导出减速器//reduce . jsconst init state={ user : '尹倩'，age: 18，sex: '男性' }；export const reduce=(state=initState，action)={ switch(action . type){ case ' USER _ UPDATE ' : return <.国家，action . payload }；案例“AGE _ GROWN”:返回{.state，age : state . age 1 }；案例“SEX _ UPDATE”:返回{.国家，action . payload }；default:返回状态；}}创建操作创建函数//action create . js export const change user=(user)={ return { payload : { user }，type:' user _ update '，}；} export const changeAge=()={ return { type : ' AGE _ GROW ' }；}绘制基本元素/* style.css */。btn { height : 31px}.输入{ height: 25px}//Demo.jsximport从' React '反应过来；“进口”。/style . CSS '；导出默认类Demo扩展了React。组件{ OnChange=()={ } OnClick=()={ } render(){ return(div puser 3360 XXX，age: xxx/p user: