我要评论redux不是说任何的应用都要用到它，如果遇到了react解决不了得问题，可以考虑使用它。
例如：
用户的使用方式复杂
不同身份的用户有不同的使用方式（比如普通用户和管理员）
多个用户之间可以协作
与服务器大量交互，或者使用了websocket
view要从多个来源获取数据
redux的设计思想：
（1）web 应用是一个状态机，视图与状态是一一对应的。
（2）所有的状态，保存在一个对象里面。
redux的基本概念和api：
1. store 保存数据的地方。整个应用只能有一个store。 函数createstore来生成store。
2. state store包含数据的集合。store.getstate() 来得到当前时刻的state. redux规定一个state对应一个view。state相同则view相同。
3.action view与state不能直接交互，view发出通知给action 表示state将要变化。 其中type属性是必然的。
store.dispatch()是view发出action的唯一方法。
4.reducer：state收到action之后会生成一个新的state，这个计算过程叫做reducer..reducer是一个函数，他接受action和当前的state来作为参数，返回一个新的state
redux工作流程：
1. 首先用户发出action。 store.dispatch(action);
2.然后，store 自动调用 reducer，并且传入两个参数：当前 state 和收到的 action。 reducer 会返回新的 state 。 let nextstate = todoapp(previousstate, action);
3.state 一旦有变化，store 就会调用监听函数。
// 设置监听函数
store.subscribe(listener);
listener可以通过store.getstate()得到当前状态。如果使用的是 react，这时可以触发重新渲染 view。
function listerner() {
let newstate = store.getstate();
component.setstate(newstate);
}
计数器的实例：
const counter = ({value}) =>(
<h1>{value}</h1>
<button onclick={onincrement}>+</button>
<button onclick={ondecrement}>-</button>
);
const reducer = (state=0, action) => {
switch(action.type) {
case 'incerment': return state+1;
case 'decrement': return state-1;
default: return state;
}
}
//传入reducer则store.dispatch会自动触发reducer的自动执行
const sotre = createstore(reducer);
const render = () => {
reactdom.render(
<counter
value={store.getstate()}
onincrement={() => store.dispatch({type:'increment'})}
ondecrement={() => store.dispatch({type:'decrement'})}
/>,
document.getelementbyid('root')
);
}
render();
//state状态发生变化时 会自动调用render
store.subscribe(render);
---------------------
作者：lixuce1234
来源：csdn
原文：https://blog.csdn.net/lixuce1234/article/details/74295691
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论