目录结构:
src |
-| App.js
-| index.css
-| index.js
views |
commponents |
count |
-| index.jsx
redux |
actions |
-| count.js
reducers |
-| count.js
store |
-| index.js
-| Constans.js
创建一个 redux
文件夹,分别创建以下文件:
views/redux/store/index.js
:
import { createStore } from 'redux'
import countReducer from '../reducers/count'
const store = createStore(countReducer)
export default store
views/redux/Constans.js
:
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
views/redux/reducers/count.js
:
import { INCREMENT, DECREMENT } from '../Constants'
const initState = 0
export default function countReducer (preState = initState, action) {
const { type, data } = action
switch (type) {
case INCREMENT:
return preState + data
case DECREMENT:
return preState - data
default:
return preState
}
}
views/redux/actions/count.js
:
import { INCREMENT, DECREMENT } from '../Constants'
export const createIncrementAction = data => ({ type: INCREMENT, data })
export const createDecrementAction = data => ({ type: DECREMENT, data })
views/commponents/count/index.jsx
:
import { Component } from 'react'
import store from '../../redux/store/index'
import {createIncrementAction,createDecrementAction} from '../../redux/actions/count'
export default class Count extends Component {
state = {}
componentDidMount(){
store.subscribe(()=>{
this.setState({})
})
}
increment = ()=>{
const {value} = this.stepNum
console.log(value);
store.dispatch(createIncrementAction(value*1))
}
decrement = ()=>{
const {value} = this.stepNum
store.dispatch(createDecrementAction(value*1))
}
incrementIfOdd = ()=>{
const {value} = this.stepNum
const count = store.getState()
if(count % 2 !== 0){
store.dispatch(createIncrementAction(value*1))
}
}
incrementIfEven = ()=>{
const {value} = this.stepNum
const count = store.getState()
if(count % 2 == 0){
store.dispatch(createIncrementAction(value*1))
}
}
incrementAsync = ()=>{
const {value} = this.stepNum
setTimeout(()=>{
store.dispatch(createIncrementAction(value*1))
},500)
}
render() {
return (
<div>
<h1>计数器值为:{store.getState()}</h1>
<select ref={c => this.stepNum = c}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<button onClick={this.increment}>+</button>
<button onClick={this.decrement}>-</button>
<button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>
<button onClick={this.incrementIfEven}>当前求和为偶数再加</button>
<button onClick={this.incrementAsync}>异步加</button>
</div>
)
}
}
修改 App.js
:
import './assets/css/App.css';
import Count from './views/components/count'
function App () {
return (
<div className="App">
<Count />
</div>
);
}
export default App;
页面效果:
上面代码是在生命周期钩子中的强制更新,如果需要在每个组件都监听 store
,可以在 index.js
入口文件监听 store
。
修改 views/commponents/count/index.jsx
:
然后,在 index.js
入口文件中进行设置:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import store from './views/redux/store';
ReactDOM.render(
<App />,
document.getElementById('root')
)
store.subscribe(() => {
ReactDOM.render(
<App />,
document.getElementById('root')
)
})
工作流程
- 使用函数
createStore
创建 store
数据点; - 创建
reducer
,获取 state
和action
,生成新的 state
store.dispatch
执行,reducer(preState,action)
处理当前dispatch
后的传入的 action.type
并返回给 preState
处理后的 state
;- 组件可以通过
store
的 API:store.getState()
获取 redux
中的返回值; store.subscribe()
监听,当 redux
状态变化时,强制更新 render
,让页面进行渲染。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)