React-Redux基础

React-Redux基础

• 基本概念

  • 核心：store ->action ->reducer->state

  • 三大原则：单一数据源，State 是只读，纯函数来执行

• 主要组件

  • Action:

    通过dispatch传递数据到store

    import { GET_NET_VALUE } from './actionTypes'
    // 创建action
    export const getAllPersonAction = (value) => ({
       type:CHANGE_ADD_VALUE,
       value
    })
    // 通过thunk中间件返回函数体
    // 获取所有成员
    export const getAllPerson = () => {
    
       return ((dispatch)=>{
    
           axios.post('/person').then((res) => {
    
               let data = res.data.data
               // 整理数据源
               let newV = data.map((v,i) => {
    
                   let newObj = v
                   newObj["key"] = i.toString()
                   return newObj
               })
    
               let action = getAllPersonAction(newV)
               dispatch(action)
           })
       })       
    }
    
    // ../other.js
    // 组件加载完成调用
    componentDidMount() {
    
       let action = getAllPerson()
       store.dispatch((v)=>action(v))
    }
      
    

  • Reducer

    Reducers 是描述如何响应action更新state

     
     const defaultState = {
         
     }
     // 简单 处理action
     function doNet(state = initialState, action) {
     
         switch (action.type) {
            // 处理net数据
         case GET_NET_VALUE:
            let netState = JSON.parse(JSON.stringify(state))
            netState.dataSource = action.dataSource
            return netState
         default:
           return state
       }
     }
    

  • Store

    • 维持应用的 state；
    • 提供 getState() 方法获取 state；
    • 提供 dispatch(action) 方法更新 state；
    • 通过 subscribe(listener) 注册监听器;
    • 通过 subscribe(listener) 返回的函数注销监听器。

    // 订阅store的改变
    store.subscribe(()=>{
    
        console.log(store.getState());
        this.setState(store.getState())
    })
    
    componentDidMount() {
    
        let action = getAllPerson()
        store.dispatch((v)=>action(v))
    }