react-redux计数器

目录

1.组件分类

2.项目结构

3.源码效果

counter.jsx

app.jsx

actions.js

actions-types.js

reducers.js

index.js

store.js

---

react-dedux是一个react插件库,专门用来简化react应用中使用redux

1.组件分类

1. UI组件
   1. 只负责 UI 的呈现，不带有任何业务逻辑
   2. 通过props接收数据(一般数据和函数)
   3. 不使用任何 Redux 的 API
   4. 一般保存在components文件夹下
2. 容器组件
   1. 负责管理数据和业务逻辑，不负责UI的呈现
   2. 使用 Redux 的 API
   3. 一般保存在containers文件夹下

2.项目结构

3.源码效果

counter.jsx

import React, {Component} from 'react'
import PropTypes from 'prop-types'

export default class Count extends Component {
	static propTypes = {
	  count: PropTypes.number.isRequired,
	  increment: PropTypes.func.isRequired,
	  decrement: PropTypes.func.isRequired
	}

	increment = () =>{
		//1.得到选择，增加数量
		const number = this.select.value*1
		//2.调用store的方法更新状态
		// this.props.store.dispatch({type:INCREMENT,data:number})
		this.props.increment(number)
	}
	
	decrement = () =>{
		//1.得到选择，增加数量
		const number = this.select.value*1
		//2.调用store的方法更新状态
		// this.props.store.dispatch({type:DECREMENT,data:number})
		this.props.decrement(number)
	}
	
	incrementIfOdd = () =>{
		//1.得到选择，增加数量
		const number = this.select.value*1
		//2.得到原本count状态，并计算新count
		const count = this.props.count
		//判断满足条件再更新
		if(count%2===1){
			//3.更新状态
			// this.props.store.dispatch({type:INCREMENT,data:number})
			this.props.increment(number)
		}		
	}
	
	incrementAsync = () =>{
		//1.得到选择，增加数量
		const number = this.select.value*1
		//2.得到原本count状态，并计算新count

		//启动延时定时器
		setTimeout(() => {
			//3.更新状态
			this.props.decrement(number)
		},1000)		
	}
	
	render() {
		//从外层获取参数
		//传结构用const {count}，传数值用户= count
		const {count} = this.props
		// debugger
		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>&nbsp;
			  <button onClick={this.increment}>+</button>
			  <button onClick={this.decrement}>-</button>&nbsp;
			  <button onClick={this.incrementIfOdd}>increment if odd</button>
			  <button onClick={this.incrementAsync}>increment async</button>	  					      
		    </div>		      
		  </div>		  
	  )
	}
}

app.jsx

import React, {Component} from 'react'
import {connect} from 'react-redux'
import {increment, decrement} from '../redux/actions'
import Counter from '../components/counter'
// 函数接收组件类，返回新的组件
// 向外暴露连接App组件的包装组件,把actions属性传递给App里的属性
// 从actions得到的方法
export default connect(
  state => ({count: state}),
  {increment, decrement}
)(Counter)

actions.js

/*
action creator模块
 */
import {INCREMENT, DECREMENT} from './action-types'

export const increment = (number) => ({type: INCREMENT,data: number})
export const decrement = (number) => ({type: DECREMENT,data: number})

actions-types.js

/*
Action对象的type常量名称模块
 */
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

reducers.js

/* 包含n个reducer函数的模块 */
import {INCREMENT, DECREMENT} from './action-types'
//指定形参默认值
export function counter(state = 0, action) {
  console.log('counter', state, action)
  switch (action.type) {
    case INCREMENT:
      return state + action.data
    case DECREMENT:
      return state - action.data
    default:
      return state
  }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './containers/app';
//react-redux自动提供store.subscribe(render)
import {Provider} from 'react-redux'
import store from './redux/store'


ReactDOM.render((
    <Provider  store={store}>
	    <App />
	</Provider>
),document.getElementById('root'))

store.js

import {createStore} from 'redux'
import {counter} from './reducers'
//根据counter函数创建store对象
const store = createStore(counter)//内部会第一次调用reducer函数得到初始state
console.log(store)
//向外部暴露
export default store