React入门——redux和react-redux

两者区别：

redux: redux更新完自身的状态之后，还要将组件的状态再来更新一下，让组件的状态与redux当中的状态保持一致。(麻烦)

react-redux:将redux当中的状态保存在组件的属性当中。当redux状态发生变化时，让组件的属性也发生变化，从而实现render的调用,只需要考虑redux当中的状态即可

redux:一种状态管理工具。

1、下载
    cnpm install redux -S
2、在store/index.js引入
    import {
        createStore,// 创建仓库
        combineReducers，// 可以实现多个模块。
    } from "redux";

3.结构：

store:仓库             
state:数据状态         
reducer:函数，该函数返回的内容即是数据状态（state）           
action:是一个对象，该对象必须要有一个type属性。
*******************************************
createStore:是一个函数，用于创建仓库。需要给该函数传递一个reducer.
getState:是一个函数，可以通过该函数获得仓库内的数据状态。
function reducer(){};
const store = createStore(reducer);// 创建仓库。
const state = stroe.getState();// 获得仓库内的数据状态

 

react-redux:基于redux

1、下载
    cnpm install react-redux -S
2、引入
    import {
        Provider:提供者，通过属性（store）。提供store,是为自己包裹的组件来使用的。
        connect:高阶组件。是当前组件与Provider的一个桥梁。
    } from "react-redux";

3、使用   src/index.js

App.js使用connect

使用映射redux state方法：

// 将redux状态映射到属性当中。数据.
// 该函数负责指定当前组件所需要的数据。
function mapStateToProps(state){
    // console.log("mapStateToProps")
    return {
        newsList:state.news.newsList
    }
}

使用：

通过 this.props.newsList调用即可

使用映射redux disptach方法：

使用同理

如果操作较多可以分开写：