【React】使用react-redux编写counter应用（优化后）

继续根据上一篇博文中提出的问题进行优化：https://blog.csdn.net/zqq_2016/article/details/109227761

1. 下载依赖包

cnpm i --save redux react-redux cnpm i --save redux-thunk //redux插件（异步中间价），用来写异步代码

2. action-types.js

/* * 包含所有的action type的常量字符串 */ export const INCREMENT = 'INCREMENT' export const DECREMENT = 'DECREMENT'

3. reducers.js

import {DECREMENT, INCREMENT} from "../redux_counter_u/action-types"; export function counter(state = 0, action) { switch (action.type) { case INCREMENT: return state + action.data case DECREMENT: return state - action.data default: return state } }

4. actions.js

import {DECREMENT, INCREMENT} from "../redux_counter_u/action-types"; //增加 export const increment = number => ({ type: INCREMENT, data: number }) //减少 export const decrement = number => ({ type: DECREMENT, data: number }) //异步（返回一个函数） export const incrementAsync = number => { return dispatch => { // 异步代码 setTimeout(() => { // 1s后才去分发一个增加的action dispatch(increment(number)) }, 1000) } }

5. store.js

import {createStore, applyMiddleware} from "redux"; import {counter} from './reducers' import thunk from 'redux-thunk' const store = createStore(counter, applyMiddleware(thunk)) //应用上异步中间件 export default store

6. containers/app.js

import Counter from "../components/react_ui/react_redux_counter/counter"; import {connect} from 'react-redux' import {increment, decrement, incrementAsync} from "../redux/react_redux_counter_u/actions"; export default connect( state => ({count: state}), {increment, decrement, incrementAsync} )(Counter)

7. components/react_ui/react_redux_conter/counter.js

import React, {Component} from 'react'; import PropTypes from "prop-types"; class Counter extends Component { // 接收3个属性 static propTypes = { count: PropTypes.number.isRequired, increment: PropTypes.func.isRequired, decrement: PropTypes.func.isRequired, incrementAsync: PropTypes.func.isRequired } // 增加 increment = () => { const number = this.select.value * 1 // const {count} = this.state // this.setState({count: count + number}) // 调用store的方法更新状态 this.props.increment(number) } // 减少 decrement = () => { const number = this.select.value * 1 // const count = this.props.store.getState() // this.setState({count: count - number}) this.props.decrement(number) } // 偶数增加（满足条件后再增加） incrementIfOdd = () => { const number = this.select.value * 1 const {count} = this.props if (count % 2 === 1) { // this.setState({count: count + number}) this.props.increment(number) } else { alert(`${count}不是奇数呦！`) } } // 异步增加（设置延时定时器） incrementAsync = () => { const number = this.select.value * 1 this.props.incrementAsync(number) } render() { // const {count} = this.state // 得到原本的count状态 const {count} = this.props console.log("App", count) return ( <div> <p>click {count} times</p> <div> <select ref={select => this.select = select}> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <button onClick={this.increment}>+</button> <button onClick={this.decrement}>-</button> <button onClick={this.incrementIfOdd}>increment if odd</button> <button onClick={this.incrementAsync}>increment async</button> </div> </div> ); } } export default Counter;

8. index.js

import React from 'react'; import ReactDOM from 'react-dom'; import App from '../src/containers/app' import {Provider} from 'react-redux'; import store from "./redux/react_redux_counter_u/store"; ReactDOM.render(( <Provider store={store}> <App/> </Provider>) , document.getElementById('root') );

9. 效果图