欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

【js】Redux基本原理和使用

程序员文章站 2022-07-02 17:22:14
Redux不是说任何的应用都要用到它,如果遇到了react解决不了得问题,可以考虑使用它。 例如: 用户的使用方式复杂不同身份的用户有不同的使用方式(比如普通用户和管理员)多个用户之间可以协作与服务器大量交互,或者使用了WebSocketView要从多个来源获取数据 Redux的设计思想: (1)W ......

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