Redux初识

Redux是JavaScript的状态容器,它提供了可预测化的状态管理。

一、Redux主要组成部分:

  • Store

Store是存储着数据的地方,Redux应用只有一个Store。
Redux提供createStore这个函数,用来生成Store。

import {createStore} from 'redux'
  store(创建的时候需要传入一个reducer)
 const  store  =  createStore(reducer);
function reducer(state,action){}
  • Action

所有数据的变化,必须通过派发(dispatch)action来更新;
action是一个普通的JavaScript对象,用来描述这次更新的type和content;

const action1 = {
    type:  "ADD_FRIEND",
    info:  {
        name:  "boge",
        age:  20
    }
}
const action2 = {
    type:"CHANGE_NAME",
    playload:  {
        index: 0,
        newName: "bogezhenshuai"    
    }
}
  • Reducer

Reducer是一个纯函数;
Reducer做的事情就是将传入的state和action结合起来生成一个新的state;

//定义initialState是为了给state一个默认值
 const  initialState = {counter: 0}
function reducer(state = initialState,action){
    switch (action.type){
      case "INCREMENT":
          return  {...state,counter:state.counter + 1}
      default:
          return state;        
  }
}

 

二、Redux三大原则:

1.单一数据源

  • 整个应用程序的state被存储在一颗object tree中,并且这个object tree只存储在一个 store 中;
  • Redux并没有强制让我们不能创建多个Store,但是那样做并不利于数据的维护;
  • 单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改;

2.State是只读的

  • 唯一修改State的方法一定是触发action,不要试图在其他地方通过任何的方式来修改State;
  • 这样就确保了View或网络请求都不能直接修改state,它们只能通过action来描述自己想要如何修改state;
  • 这样可以保证所有的修改都被集中化处理,并且按照严格的顺序来执行,所以不需要担心race condition(竟态)的问题;

3.使用纯函数来执行修改

  • 通过reducer将 旧state和 actions联系在一起,并且返回一个新的State;
  • 随着应用程序的复杂度增加,我们可以将reducer拆分成多个小的reducers,分别操作不同state tree的一部分;
  • 但是所有的reducer都应该是纯函数,不能产生任何的副作用;

 

三、Redux的使用过程

1、创建一个对象,作为我们要保存的状态

2、创建Store来存储这个state:

     创建store时必须创建reducer;
     我们可以通过store.getState来获取当前的state;

3、通过action来修改state:

     通过dispatch来派发action;
     通常actoin中都会有type属性,也可以携带其他的数据;

4、修改reducer中的处理代码

5、可以在派发action之前,监听store的变化;

import {createStore} from 'redux'
//定义initialState是为了给state一个默认值
 const  initialState = {counter: 0}
//action
 const  action = {type:"INCREMENT"};
function reducer(state = initialState,action){
    switch (action.type){
      case "INCREMENT":
          return  {...state,counter:state.counter + 1}        
  }
}
 //store(创建的时候需要传入一个reducer)
 const  store  =  createStore(reducer);
//订阅store的修改
store.subscribe(() => {
      console.log("counter:",store.getState().counter);  //显示counter:1
});
//派发action
store.dispatch(action);

 

 

                                            Redux流程.png

 




转自:https://www.jianshu.com/p/e94f81aa82c4
 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值