React - Redux 引入、Redux 核心概念、Redux 初试、Redux 完整实现

一、Redux 引入1、Redux 概述Redux 是一个专门用于做状态管理的 JS 库它可以用在 React、Angular、Vue 等项目中但基本与 React 配合使用用于集中式管理 React 应用中多个组件共享的状态2、适用场景共享某个组件的状态需要让其他组件可以随时拿到通信一个组件需要改变另一个组件的状态二、Redux 核心概念1、action动作对象包含 2 个属性type标识属性值为字符串类型必要data数据属性值为任意类型可选2、reducer用于初始化状态、加工状态是一个纯函数加工时根据旧的 state 和 action产生新的 state3、store将 state、action、reducer 联系在一起的对象此对象的功能如下getState()得到 statedispatch(action)分发 action触发 reducer 调用产生新的 statesubscribe(listener)注册监听当产生了新的 state 时自动调用三、Redux 初试1、纯 React 实现1componentCount 组件import React, { Component } from react; export default class Count extends Component { state { count: 0 }; // 加 increment () { const { value } this.selectNumber; const { count } this.state; this.setState({ count: count value * 1 }); }; // 减 decrement () { const { value } this.selectNumber; const { count } this.state; this.setState({ count: count - value * 1 }); }; // 奇数再加 incrementIfOdd () { const { value } this.selectNumber; const { count } this.state; if (count % 2 ! 0) { this.setState({ count: count value * 1 }); } }; // 异步加 incrementAsync () { const { value } this.selectNumber; const { count } this.state; setTimeout(() { this.setState({ count: count value * 1 }); }, 500); }; render() { return ( div h2当前求和为{this.state.count}/h2 select ref{(c) (this.selectNumber c)} option value11/option option value22/option option value33/option /select nbsp; button onClick{this.increment}/buttonnbsp; button onClick{this.decrement}-/buttonnbsp; button onClick{this.incrementIfOdd}当前求和为奇数再加/buttonnbsp; button onClick{this.incrementAsync}异步加/button /div ); } }2mainApp 组件import React, { Component } from react; import Count from ./components/Count; export default class App extends Component { render() { return ( div Count / /div ); } }index.jsimportReactfromreact;// 引入 React 核心库importReactDOMfromreact-dom;// 引入 ReactDOMimportAppfrom./App;// 引入 App 组件// 渲染 App 组件到页面ReactDOM.render(App/,document.getElementById(root));2、Redux 精简实现1dependencynpminstallredux4.0.52reduxcount_reducer.js// 该文件是用于创建一个为 Count 组件服务的 Reducer// Reducer 本质就是一个函数// Reducer 会接收到两个参数preState之前的状态、action动作对象// 从 action 中可以获取到 type 和 data根据 type 决定如何加工 dataconstinitState0;// 初始状态exportdefaultfunctioncountReducer(preStateinitState,action){const{type,data}action;switch(type){caseincrement:returnpreStatedata;casedecrement:returnpreState-data;default:returnpreState;}}store.js// 该文件专门用于暴露一个 store 对象整个应用只有一个 store 对象import{createStore}fromredux;importcountReducerfrom./count_reducer;exportdefaultcreateStore(countReducer);3componentCount 组件import React, { Component } from react; import store from ../../redux/store; export default class Count extends Component { // 加 increment () { const { value } this.selectNumber; store.dispatch({ type: increment, data: value * 1 }); }; // 减 decrement () { const { value } this.selectNumber; store.dispatch({ type: decrement, data: value * 1 }); }; // 奇数再加 incrementIfOdd () { const { value } this.selectNumber; const { count } store.getState(); if (count % 2 ! 0) { store.dispatch({ type: increment, data: value * 1 }); } }; // 异步加 incrementAsync () { const { value } this.selectNumber; setTimeout(() { store.dispatch({ type: increment, data: value * 1 }); }, 500); }; render() { return ( div h2当前求和为{store.getState()}/h2 select ref{(c) (this.selectNumber c)} option value11/option option value22/option option value33/option /select nbsp; button onClick{this.increment}/buttonnbsp; button onClick{this.decrement}-/buttonnbsp; button onClick{this.incrementIfOdd}当前求和为奇数再加/buttonnbsp; button onClick{this.incrementAsync}异步加/button /div ); } }4mainApp 组件import React, { Component } from react; import Count from ./components/Count; export default class App extends Component { render() { return ( div Count / /div ); } }index.jsimportReactfromreact;// 引入 React 核心库importReactDOMfromreact-dom;// 引入 ReactDOMimportAppfrom./App;// 引入 App 组件importstorefrom./redux/store;// 第一次渲染应用启动时立即执行ReactDOM.render(App/,document.getElementById(root));// 订阅 store 的变化当 store 中任何状态变化时重新渲染整个应用store.subscribe((){ReactDOM.render(App/,document.getElementById(root));});四、Redux 完整实现1、reduxconstant.js// 定义 action 中 type 的常量值exportconstINCREMENTincrement;exportconstDECREMENTdecrement;count_action.js// 该文件专门为 Count 组件生成 actionimport{INCREMENT,DECREMENT}from./constant;exportconstcreateIncrementAction(data)({type:INCREMENT,data});exportconstcreateDecrementAction(data)({type:DECREMENT,data});count_reducer.js// 该文件是用于创建一个为 Count 组件服务的 Reducer// Reducer 本质就是一个函数// Reducer 会接收到两个参数preState之前的状态、action动作对象// 从 action 中可以获取到 type 和 data根据 type 决定如何加工 dataimport{INCREMENT,DECREMENT}from./constant;constinitState0;// 初始状态exportdefaultfunctioncountReducer(preStateinitState,action){const{type,data}action;switch(type){caseINCREMENT:returnpreStatedata;caseDECREMENT:returnpreState-data;default:returnpreState;}}store.js// 该文件专门用于暴露一个 store 对象整个应用只有一个 store 对象import{createStore}fromredux;importcountReducerfrom./count_reducer;exportdefaultcreateStore(countReducer);2、componentCount 组件import React, { Component } from react; import store from ../../redux/store; import { createIncrementAction, createDecrementAction } from ../../redux/count_action; export default class Count extends Component { // 加 increment () { const { value } this.selectNumber; store.dispatch(createIncrementAction(value * 1)); }; // 减 decrement () { const { value } this.selectNumber; store.dispatch(createDecrementAction(value * 1)); }; // 奇数再加 incrementIfOdd () { const { value } this.selectNumber; const { count } store.getState(); if (count % 2 ! 0) { store.dispatch(createIncrementAction(value * 1)); } }; // 异步加 incrementAsync () { const { value } this.selectNumber; setTimeout(() { store.dispatch(createIncrementAction(value * 1)); }, 500); }; render() { return ( div h2当前求和为{store.getState()}/h2 select ref{(c) (this.selectNumber c)} option value11/option option value22/option option value33/option /select nbsp; button onClick{this.increment}/buttonnbsp; button onClick{this.decrement}-/buttonnbsp; button onClick{this.incrementIfOdd}当前求和为奇数再加/buttonnbsp; button onClick{this.incrementAsync}异步加/button /div ); } }3、mainApp 组件import React, { Component } from react; import Count from ./components/Count; export default class App extends Component { render() { return ( div Count / /div ); } }index.jsimportReactfromreact;// 引入 React 核心库importReactDOMfromreact-dom;// 引入 ReactDOMimportAppfrom./App;// 引入 App 组件importstorefrom./redux/store;// 第一次渲染应用启动时立即执行ReactDOM.render(App/,document.getElementById(root));// 订阅 store 的变化当 store 中任何状态变化时重新渲染整个应用store.subscribe((){ReactDOM.render(App/,document.getElementById(root));});