React学习笔记---redux

一、redux理解

1、学习文档

1. 英文文档: https://redux.js.org/
2. 中文文档: http://www.redux.org.cn/
3. Github: https://github.com/reactjs/redux

2、redux是什么

1. redux是一个专门用于做状态管理的JS库(不是react插件库)。
2. 它可以用在react, angular, vue等项目中, 但基本与react配合使用。
3. 作用: 集中式管理react应用中多个组件共享的状态。

3、什么情况下需要使用redux

1. 某个组件的状态，需要让其他组件可以随时拿到（共享）。
2. 一个组件需要改变另一个组件的状态（通信）。
3. 总体原则：能不用就不用, 如果不用比较吃力才考虑使用。

4、redux工作流程

二、redux的三个核心概念

1、action

1. 动作的对象
2. 包含2个属性
   type：标识属性, 值为字符串, 唯一, 必要属性
   data：数据属性, 值类型任意, 可选属性
3. 例子：{ type: ‘ADD_STUDENT’,data:{name: ‘tom’,age:18} }

2、reducer

1. 用于初始化状态、加工状态。
2. 加工时，根据旧的state和action， 产生新的state的纯函数。

3、 store

1. 将state、action、reducer联系在一起的对象
2. 如何得到此对象?

1. import {createStore} from ‘redux’
2. import reducer from ‘./reducers’
3. const store = createStore(reducer)

3. 此对象的功能?

1. getState(): 得到state
2. dispatch(action): 分发action, 触发reducer调用, 产生新的state
3. subscribe(listener): 注册监听, 当产生了新的state时, 自动调用

三、引出Redux编程的案例

效果图

1、使用纯react去编写

目录结构

index.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))

App.jsx

import React, {
    Component } from 'react'
import Count from './components/Count/Count'
export default class App extends Component {
   
  render () {
   
    return (
      <div>
        <Count />
      </div>
    )
  }
}

components下的Count下的Count.jsx

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>
				<h1>当前求和为：{
   this.state.count}</h1>
				<select ref={
   c => this.selectNumber = c}>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
				</select>&nbsp;
				<button onClick={
   this.increment}>+</button>&nbsp;
				<button onClick={
   this.decrement}>-</button>&nbsp;
				<button onClick={
   this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
				<button onClick={
   this.incrementAsync}>异步加</button>&nbsp;
			</div>
		)
	}
}

2、精简版Redux

目录结构

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'

ReactDOM.render(<App />, document.getElementById('root'))

store.subscribe(() => {
    //目的是一旦有状态发生改变，就让render执行一次
  ReactDOM.render(<App />, document.getElementById('root'))
})

App.jsx

import React, {
    Component } from 'react'
import Count from './components/Count'

export default class App extends Component {
   
	render() {
   
		return (
			<div>
				<Count/>
			</div>
		)
	}
}

components下的Count下的indext.jsx

import React, {
    Component } from 'react'
//引入store，用于获取redux中保存状态
import store from '../../redux/store'

export default class Count extends Component {
   

	state = {
   carName:'奔驰c63'}

	/* componentDidMount(){
		//检测redux中状态的变化，只要变化，就调用render
		store.subscribe(()=>{
			this.setState({})
		})
	} */

	//加法
	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>
				<h1>当前求和为：{
   store.getState()}</h1>
				<select ref={
   c => this.selectNumber = c}>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
				</select>&nbsp;
				<button onClick={
   this.increment}>+</button>&nbsp;
				<button onClick={
   this.decrement}>-</button>&nbsp;
				<button onClick={
   this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
				<button onClick={
   this.incrementAsync}>异步加</button>&nbsp;
			</div>
		)
	}
}

redux下的count_reducer.js

/* 
	1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
	2.reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)
*/

const initState = 0 //初始化状态
export default function countReducer(preState=initState,action){
   
	// console.log(preState);
	//从action对象中获取：type、data
	const {
   type,data} = action
	//根据type决定如何加工数据
	switch (type) {
   
		case 'increment': //如果是加
			return preState + data
		case 'decrement': //若果是减
			return preState - data
		default: