酒店网站 asp.net,网站footer怎么做,个人中心页面设计图片,怎么找wordpress模板代码React 基础巩固(三十二)——Redux的三大原则
一、Redux的三大原则 单一数据源 整个应用程序的state被存储在一颗object tree 中#xff0c;并且这个object tree 只存储在一个store中#xff1b;Redux并没有强制让我们不能创建多个Store#xff0c;但是那样做不利于数据维护…React 基础巩固(三十二)——Redux的三大原则
一、Redux的三大原则 单一数据源 整个应用程序的state被存储在一颗object tree 中并且这个object tree 只存储在一个store中Redux并没有强制让我们不能创建多个Store但是那样做不利于数据维护单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改 State是只读的 唯一修改State的方法一定是触发action不要试图在其他地方通过任何的方式来修改State 这样就确保了View或网络请求都不能直接修改state它们只能通过action来描述自己想要如何修改state 这样可以保证所有的修改都被集中化处理并且按照严格的顺序来执行所以不需要担心reace condition竞态的问题 使用纯函数来执行修改 通过reducer将旧state和actions联系在一起并且返回一个新的state随着应用程序的复杂度增加我们可以将reducer拆分成多个小的reducers分别操作不同state tree 的一部分但是所有的reducer都应该是纯函数不能产生任何的副作用
二、Redux的使用流程 三、Redux的基本使用计数器小案例 构建react项目 # 创建新的react项目
create-react-app redux-learn
# 创建成功后cd进入文件夹随后安装redux
npm install redux删除暂时无关文件构建store相关文件并引用store至所需页面中 目录 store/constants.js export const ADD_NUMBER add_number;
export const SUB_NUMBER sub_number;store/reducer.js import * as actionTypes from ./constants;const initialState {counter: 111,
};function reducer(state initialState, action) {switch (action.type) {case actionTypes.ADD_NUMBER:return { ...state, counter: state.counter action.num };case actionTypes.SUB_NUMBER:return { ...state, counter: state.counter - action.num };default:return state;}
}export default reducer; store/actionCreators.js import * as actionTypes from ./constants;export const addNumberAction (num) ({type: actionTypes.ADD_NUMBER,num,
});export const subNumberAction (num) ({type: actionTypes.SUB_NUMBER,num,
}); store/index.js import { createStore } from redux;
import reducer from ./reducer;const store createStore(reducer);export default store; pages/home.jsx import React, { PureComponent } from react;
import store from ../store;
import { addNumberAction } from ../store/actionCreators;
export class home extends PureComponent {constructor() {super();this.state {counter: store.getState().counter,};}componentDidMount() {store.subscribe(() {const state store.getState();this.setState({counter: state.counter,});});}addNumber(num) {store.dispatch(addNumberAction(num));}render() {const { counter } this.state;return (divhome counter:{counter}divbutton onClick{(e) this.addNumber(1)}1/buttonbutton onClick{(e) this.addNumber(5)}5/buttonbutton onClick{(e) this.addNumber(8)}8/button/div/div);}
}export default home; pages/profile.jsx import React, { PureComponent } from react;
import store from ../store;
import { subNumberAction } from ../store/actionCreators;
export class profile extends PureComponent {constructor() {super();this.state {counter: store.getState().counter,};}componentDidMount() {store.subscribe(() {const state store.getState();this.setState({counter: state.counter,});});}subNumber(num) {store.dispatch(subNumberAction(num));}render() {const { counter } this.state;return (divprofile counter:{counter}divbutton onClick{(e) this.subNumber(1)}-1/buttonbutton onClick{(e) this.subNumber(5)}-5/buttonbutton onClick{(e) this.subNumber(8)}-8/button/div/div);}
}export default profile; App.jsx import React, { PureComponent } from react;
import Home from ./pages/home;
import Profile from ./pages/profile;
import ./style.css;
import store from ./store;export class App extends PureComponent {constructor() {super();this.state {counter: store.getState().counter,};}componentDidMount() {store.subscribe(() {const state store.getState();this.setState({counter: state.counter,});});}render() {const { counter } this.state;return (divh2App Counter: {counter}/h2div classNamepagesHome /Profile //div/div);}
}export default App;
运行结果 至此代码仍较为复杂代码将在React 基础巩固(三十三)中得到优化
