React 18 仿携程项目实战【十六】获取store中的数据&向store传递数据

安装Reudx

npm install redux@4.2.0

使用步骤如下： 

Reudx.tsx

Store.tsx

通过createStore（）创建（已弃用）,并导出

import { createStore } from "redux";

export const store = createStore(languageReducer);

languageReducer.tsx

接受 state 和 action 两个参数，并返回新的状态，

其中 action 包含type和payload两个属性

export const languageReducer= (state,action)=>{
    switch( action.type ){
        case xxx:
            return {...state, language: action.payload}
        case xx:
            return xxxxx
        default:
            return state
    }
}

<!--switch条件语句：
            switch (条件){
                case 条件1:

                    满足条件1时执行语句;        
                    break;
                case 条件2:

                    满足条件2执行语句;        
                    break;
                default:

                    默认时执行语句;
                    break;
            }
            --> 

 组件

以下是类组件使用方法：

引入导出的store

通过getState方法获取store中的数据（类组件必须用在constructor中）

const storeState = store.getState();

constructor中初始化数据：

this.state = { //将store中数据赋值给本组件中
       language: storeState.language,
       languageList: storeState.languageList
}

通过subscribe方法实时订阅store中的数据（类组件最好用在constructor中）

store.subscribe(this.languageChange)

languageChange=()=> {
           //通过getState获取store更新后的数据，再用setState()更新本身组件的state
      const subState = store.getState();
      this.setState({
           language:subState.language,
           languageList: subState.languageList
      })
}

注： subscribe（）订阅方法最好用在constructor构造函数或者componentDidMount（）初次渲染UI函数中，作用如下：

通过dispatch方法传递数据给store 

store.dispatch({
    type: "xxxx",
    payload:xxx,
})

参考笔记

补充：

console.info(actions.payload)
// 等同于
console.log(actions.payload)