图书馆网站建设的建议,亿图,网络科技公司起名大全参考,网站内做关键词连接含义
Redux是专门用作状态管理的js库#xff0c;不是react插件库可以用在react、angular、vue等项目中能集中式管理react应用中多个组件共享的状态
使用
npx create-react-app redux1
cnpm install redux -S关键字
storereduceractionsubscribe
案例
1. 创建store、并传…含义
Redux是专门用作状态管理的js库不是react插件库可以用在react、angular、vue等项目中能集中式管理react应用中多个组件共享的状态
使用
npx create-react-app redux1
cnpm install redux -S关键字
storereduceractionsubscribe
案例
1. 创建store、并传入reducer
import { createStore } from redux
import { counter } from ./redux/reducers
const store createStore(counter)
2. 使用dispatch
store.dispatch({type: , // action的名字 data: , // 传给action的参数
})
3. reducer里处理数据
function counter(state 0, action) {const { type, data } action// 结构出dispatch的action type和参数返回state
}
4. 监听state触发更新
store.getState() // 获取最新的state
store.subscribe(render) // 触发ReactDOM.renderindex.js 入口文件
import ReactDOM from react-dom
import App from ./App
import { createStore } from redux
import { counter } from ./redux/reducers
const store createStore(counter)// state监听变化时执行传入的方法
store.subscribe(render)
function render() {ReactDOM.render(App store{store} /,document.getElementById(root))
}
render()reducers.js
export function counter(state 0, action) {const { type, data } actionconsole.log(reduce 触发了方法, type)console.log(reduce 接收参数, data)switch (type) {case add:return state datacase minus:return state - datacase add_odd:if (data % 2 ! 0) {return state data}case add_delay:// 这里实现不了延时返回可以拿到外面调用方法处去做延时调用setTimeout(() {return state data}, 1000)default:return state}
}action.js
export function add (param){return{type: add, // 方法名data: param // 对应参数}
}
export function minus (param){return{type: minus,data: param}
}
export function add_odd (param){return{type: add_odd,data: param}
}
export function add_delay (param){return{type: add_delay,data: param}
}App.jsx UI
import React, { Component, createRef } from react
import * as actions from ./redux/actionexport default class App extends Component {constructor(props) {super(props)this.selectRef createRef()}compute (method) {const selectDom this.selectRef.current,selectVal Number(selectDom.value),store this.props.store;console.log(app store/method, store, method)store.dispatch(actions[method](selectVal))}render() {const count this.props.store.getState()console.log(重新render了, count)return (h1数值{count}/h1select ref{this.selectRef}option value11/optionoption value22/optionoption value33/option/selectnbsp;button onClick{() this.compute(add)}/buttonnbsp;button onClick{() this.compute(minus)}-/buttonnbsp;button onClick{() this.compute(add_odd)}奇数加/buttonnbsp;button onClick{() this.compute(add_delay)}延迟加/button/)}
}
