redux 与 react-redux
- Redux
一、Redux 三大原则:
1、一个应用永远只有一个数据源(整个应用状态都保存在一个对象中,Redux提供的工具函数combineReducers可以解决庞大的数据对象的问题)
2、状态是只读的,不能直接修改,而是派发action
3、状态修改均由reducer 这样的纯函数完成
二、在项目中使用
1、在项目入口文件中import
--------若没有则需要安装,ts语法下安装使用 npm install @types/redux的方式
import { createStore, applyMiddleware } from "redux";
2、创建store
// App 是使用combineReducers方法生成的容器组件,里面融合了多个reducer
export const store = createStore(App, applyMiddleware(thunk));
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<Configurator />
</BrowserRouter>
</Provider>,
document.getElementById("root") as HTMLElement
);
createStore方法创建的是一个对象,它本身又包含4个方法
getState():获取store中的数据 及 状态
dispatch(action):分发一个action ,并返回整个action,这是唯一能改变store中数据的方式
subscribe(listener):注册一个监听者,它在store发生变化时被调用
- React-Redux
1、与redux一样在项目入口文件中import并使用
2、在项目中使用时与redux则不同,react-redux提供了 connect()方法:export default connect(mapStateToProps, mapDispatchToProps)(Form.create()(ScheduleList));
来获取store数据的功能
// 从store 中取数据,此时的this.props包含的有(父组件传过来的数据)和(在这个方法中获取到的数据)
const mapStateToProps = (state) => {
return ({
count: state.counter.count
})
}
// 派发action改变store数据,这里边不能调用这个外边的类中的其他方法,可以在其它方法中以this.props.func()的方法调用这里边派发action的方法, 注:ownProps为别的组件传过来的属性或方法
const mapDispatchToProps=(dispatch,ownProps)=>{
return{
handleInputFocus(){
dispatch(actionCreaters.getList());
dispatch(actionCreaters.searchFocus());
},
handleInputBlur(){
dispatch(actionCreaters.searchBlur());
},
handleMouseEnter(){
dispatch(actionCreaters.mouseEnter());
},
handleMouseLeave(){
dispatch(actionCreaters.mouseLeave());
},
handleChangePage(page,totalPage){
if(page < totalPage){
dispatch(actionCreaters.changePage(page + 1));
}else{
dispatch(actionCreaters.changePage(1));
}
}
}
}