【React】简单使用redux编写counter应用（未优化前）

    redux编写的应用主要的目录包括src/index.js、src/App.js、redux/action-types.js、redux/reducers.js.

    注意：this.props.store.getState()与this.props.store.dispatch()的使用

一、redux理解

① 学习文档：

  1）英文文档：https://redux.js.org/

  2）中文文档：http://www.redux.org.cn/

  3）github: https://github.com/reactjs/redux

② redux是什么？

  1）redux是一个独立专门用于做状态管理的JS库（不是react插件库）

  2）它可以用在react、angular、vue等项目中，但基本与react配合使用

  3）作用：集中式管理react应用中多个组件共享的状态

③ 什么情况下使用redux

  1）总体原则：能不用就不用，如果不用比较吃力才考虑使用

  2）某个组件的状态，需要共享

  3）某个状态需要在任何地方都可以拿到

  4）一个组件需要改变全局状态

  5） 一个组件需要改变另一个组件的状态

二、redux的核心API

① createStore()  —— redux核心函数

  1）作用：创建包含指定reducer的store对象

  2）编码：

import {createStore} from 'redux' import {counter} from './reducers' const store = createStore(counter)

② store对象

  1）作用：redux库最核心的管理对象

  2）它内部维护着：state和reducer（根据旧的状态产生新的状态的函数）

  3）核心方法：

    getState()

    dispatch(action)

    subscribe(listener)

  4）编码：

store.getState() store.dispatch({type:'INCREMENT',data:number}) store.subscribe(render)

③  applyMiddleware()

  1）作用：应用上基于redux的中间件（插件库）

  2）编码：

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

④ combineReducers()

  1）作用：合并多个reducer函数

  2）编码：

export default combineReducers({ user, chatUser, chat })

三、redux的三个核心概念

 ① action  

      a. 标识要执行行为的对象

      b. 包含2个方面的属性：

               type：标识属性，值为字符串，唯一，必要属性

               data：数据属性，值类型任意，可选属性

      c. 例子：

const action = { type:'INCREMENT', data: 2 }

      d. Action Creator（创建Action的工厂函数）

const increment = number =>({ type:'INCREMENT', data:number })

 ② reducer

      a. 根据旧的state和action，产生新的state的纯函数

      b. 样例：

import {INCREMENT, DECREMENT} from "./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 } }

    c. 注意：返回一个新的状态；不要修改原来的状态。 

 ③ store —— 最终是管理state

    a. 将state、action与reducer联系在一起的对象

    b. 如何得到此对象？

import {createStore} from 'redux' import reducer from './reducers' const store = createStore(reducer)

    c. 此对象的功能？

getState()：得到state dispatch(action)：分发action，触发reducer调用，产生新的state subscribe(listener)：注册监听，当产生了新的state时，自动调用

四、使用redux编写counter应用

1. 下载redux依赖包

cnpm i --save redux

2. action-types.js

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

3. reducers.js

import {INCREMENT, DECREMENT} from "./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 } }

3. index.js

import React from 'react'; import ReactDOM from 'react-dom'; import {createStore} from "redux"; import {counter} from './redux/redux_counter/reducers' import App from "./App"; const store = createStore(counter) function render() { ReactDOM.render( <App store={store}/> , document.getElementById('root') ); } // 初始化渲染 render() //订阅监听（store中的状态变化了，就会自动调用进行重绘） store.subscribe(render)

4. App.js

import React, {Component} from 'react'; import {DECREMENT, INCREMENT} from "./redux/redux_counter/action-types"; //非受控组件select的使用 class App extends Component { // 增加 increment = () => { const number = this.select.value * 1 // const {count} = this.state // this.setState({count: count + number}) // 调用store的方法更新状态 this.props.store.dispatch({type: INCREMENT, data: number}) } // 减少 decrement = () => { const number = this.select.value * 1 // const count = this.props.store.getState() // this.setState({count: count - number}) this.props.store.dispatch({type: DECREMENT, data: number}) } // 偶数增加（满足条件后再增加） incrementIfOdd = () => { const number = this.select.value * 1 const count = this.props.store.getState() if (count % 2 === 1) { // this.setState({count: count + number}) this.props.store.dispatch({type: INCREMENT, data: number}) } else { alert(`${count}不是奇数呦！`) } } // 异步增加（设置延时定时器） incrementAsync = () => { const number = this.select.value * 1 setTimeout(() => { this.props.store.dispatch({type: INCREMENT, data: number}) }, 1000) } render() { // const {count} = this.state // 得到原本的count状态 const count = this.props.store.getState() 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 App;

5. 效果图