两者区别:
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方法:
使用同理
如果操作较多可以分开写: