react学习笔记（三）redux基本使用

随着react项目需求日益复杂，组件越来越多，组件的状态维护变得越来越麻烦，redux作为一个状态集中管理的工具，可以解决这个问题

概述

创建一个基础的redux分为3步

• 创建action
• 创建reducer
• 创建store

例如：

import { createStore,Reducer,Store } from 'redux'

//action
export const increment = ()=>{
    return {
        type:'TEST',
        data:{msg:'test'}
    }
}

//reducer
const reducer:Reducer = (state = {} ,action)=>{
    switch (action.type) {
        case 'TEST':
            return {...state,...action.data}
        default:
            return state
    }
}

//store
const store  = createStore(reducer)

Action

action是一个对象，这个对象包含type字段，type字段相当于是这个action的一个标志,其他字段是供reducer来返回新的state使用

    const todoAction = {
        type:'TODO',
        data:{msg:'data'},
        other:'other data'
    }
    //store是通过createStore创建的，后面会说到
    store.dispatch(todoAction)

这样的action有时候不能满足我们的需求，比如我们在dispatch某个action的时候希望传入一些参数，这样对象形式的action就无法满足，这个时候就需要用到action creater的形式来创建action（大多数情况下我们用的是这种方式）

//将dispatch时传入的参数传给reducer
const todoAction = (data)=>{
    return {
        type:'TODO',
        data
    }
}
//store是通过createStore创建的，后面会说到
store.dispatch(todoAction(someData))

Reducer

reducer是一个action的处理函数，通过对于的actionType以及action传入的data来返回一个新的state，从而触发视图的变更

简单来看就如下面这样：

const reducer = function (state, action) {
  // 根据不同的action.type做出相应的处理
  return new_state;
};

下面是一个实际的例子

//action 
const add = {
    type:'ADD'
}
const subs = {
    type:'SUBS'
}

//reducer
const reducer = (state = 0,action)=>{
    switch(action.type){
        acse 'ADD':
            return state ++
        case 'SUBS':
            return state --
        default:
            return state
    }
}

Store

store就是数据的集中管理器，通过redux通过的createStore来创建，createStore方法接受一个fn函数作为参数，fn接受当前的state和action，返回新的state状态

import { createStore } from 'redux'

const store = createStore((state,action)=>{
    //...do something
    
    return state
})

根据上面对reducer的讲解，实际上createStore接受的fn就是reducer

store的几个常用方法

• store.dispatch

  该方法用来触发action

  let action = {type:'TEST'}
  store.dispatch(action)
  

• store.getState

  该方法用来获取当前的state

  let state = store.getState()
  

• store.subscribe

  该方法用来监听state的变化并返回一个unsubscribe方法，调用unsubscribe方法就会移除监听

  let unsubscribe = store.subscribe(()=>{
    //当state发生变化时，改方法会被调用
    console.log(store.getState())
  })
  
  //取消监听
  unsubscribe()