【js】Redux基本原理和使用

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