从redux衍生到react-redux的实战应用（一篇就懂）

在上篇，写了一个redux的简单demo，redux使用，这篇就结合react-redux与实际项目进行结合使用。

加减按钮demo

实现简单的点击加号，点击减号改变数字的项目，demo虽小，五脏俱全；

安装 redux 和 react-redux

npm i redux react-redux

创建react项目 基本操作

npx create-react-app my-app
cd my-app
npm start

再根目录下父组件 index.js中

import { createStore } from 'redux'	// 用于创建store
import { Provider } from 'react-redux'	// 用于给后代组件提供store
import CounterReducer from './reducer/CounterReducer'	// 改变store的方法减速器

// 创建store对象
const store = createStore(CounterReducer)
// store 包含三个方法 subscribe 监听，订阅
// 					 dispatch 派发
// 					 getState 获取状态
store.subscribe(() => {
  console.log(store.getState())
})

ReactDOM.render(
  <React.StrictMode>
  // 使用Provider标签将App包裹 将store传递进去
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

创建reducers/CounterReducer.js
修改state状态必须要使用纯函数
1.函数返回值由参数决定；
2.函数没有任何副作用（不改变原数据）
因此下面使用es6解构赋值的形式

// 初始化state状态
const initState = {
  number: 0,
  other: ''
}

// 根据type值 来决定操作方法
const Counter = (state = initState, actions) => {
  switch (actions.type) {
      case 'ADD_NUM':
         return {
           ...state,
           number: state.number + actions.value
         }
      case 'MINUS_NUM':
          return {
            ...state,
            number: state.number - actions.value
          }
      default:
          return state;
  }
}
export default Counter

在使用的组件中 Counter.js

import React from 'react';
// 引入connect 连接 Provider传递下来的store
import { connect } from 'react-redux'

class App extends React.Component {
  render() {
      // 下面的对象都在这个 props中
    const { number, add, minus } = this.props 
    return(
      <div style={{textAlign:"center"}}>
        <h1>{number}</h1>
        <button onClick={() => add(10)}>+++</button>
        <button onClick={() => minus(5)}>---</button>
      </div>
    )
  }
}

// 使用mapStateToProps方法 将state的number 赋值给 props的number中
const mapStateToProps = (state, ownProps) => {
// ownProps 等于 props，此处没使用
  console.log(ownProps)  
  return {
    number: state.number
  }
}

// 使用mapDispatchToProps方法 将add minus 赋值到 props上
const mapDispatchToProps = (dispatch) => {
  return {
    add: (value) => dispatch({type: 'ADD_NUM', value}),  // 根据类型派发
    minus: (value) => dispatch({type: 'MINUS_NUM', value})
  }
}

// connect 第一参数 两者不能颠倒 否则报错
export default connect(mapStateToProps, mapDispatchToProps)(App)

以上便完成了 react-redux的demo

下一步，进一步优化下，将dispatch的方法提取出来, 创建actions/counter.js

export const add = (value) => {
  return {
    type: 'ADD_NUM',
    value
  }
}

export const minus = (value) => {
  return {
    type: 'MINUS_NUM',
    value
  }
}

组件的Counter.js重新引入,并修改mapDispatchToProps方法

import { add, minus } from '../actions/counter'

const mapDispatchToProps = (dispatch) => {
  return {
    add: () => dispatch(add()),
    minus: () => dispatch(minus())
  }
}

完成~~~
本人react菜鸟一枚，有什么错误，麻烦各位大佬提出，Thanks!