react-redux简单案例

react-redux 用法

一. 配置环境，安装包

1. 全局安装 create-react-app 创建一个react项目

npm i create-react-app -g

2. 创建一个项目

npx create-react-app react-redux-demo

3. 安装redux

npm i redux --save

4. 安装react-redux

npm i react-redux

二. 用法
5. 首先在根文件index.js下引入 Provider ，因为只有 使组件层级中的 connect() 方法都能够获得 Redux store， 或者这样引入

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

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from "./redux/store"
import { Provider } from 'react-redux'

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

6. 创建一个actionType.js 里面存储常量，全局管理type + 防这程序员常量写错

export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

7. 创建一个count_action.js 文件，修改redux里面的数据

// 该文件专本为count生成action对象
import { INCREMENT, DECREMENT } from "./constant";
export const createIncrementAction = (data) => ({ type: INCREMENT, data });
export const createDecrementAction = (data) => ({ type: DECREMENT, data });

export const createIncrementAsyncAction = (data, time) => {
  return (dispatch) => {
    setTimeout(() => {
      dispatch(createIncrementAction(data));
    }, time);
  };
};

8. 创建一个count_reducer.js 文件，该文件将修改的数据返回出去

// 该文件创建一个为count组件服务的reducer，reducer的本质是一个函数
// reducer函数会接收两个参数，之前的状态prevState + 动作对象 action
import { INCREMENT, DECREMENT } from './constant'
const initState = 0
export default function countReduce(prevState = initState, action) {
    // 从action中获取type + action
    const {type, data} = action
    // 根据type决定如何加工数据
    switch (type) {
        case INCREMENT: // 如果是加
            return prevState + data
        case DECREMENT: // 如果是减
            return prevState - data
        default:
            return prevState
    }
}

9. 创建一个store.js文件 该文件是redux的核心

// 该文件专门暴露一个store对象，整个对象只有一个store

// 引入createStore用来创建redux最为核心的store对象
import {createStore} from 'redux'
// 引入为count组件服务的reducer
import countReducer from './count_reducer.js'
export default createStore(countReducer)

10. 组件内调用

import React, { Component } from "react";
import { createIncrementAction, createDecrementAction } from "./redux/count_action";
import { connect } from 'react-redux';

class App extends Component {
  increment = () => {
    // 获取value的值
    const value = this.inputValue.value - 0
    this.props.createIncrementAction(value)
  };
  decrement = () => {
    this.props.createDecrementAction(1)
  };
  render() {
    return (
      <div>
        <h1>当前求和为：{this.props.count}</h1>
        <input ref={ e=> this.inputValue = e } type="text"/>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-1</button>
      </div>
    );
  }
}
// 将redux中的数据混入到组件的props中
const mapStateToProps = (state) => {
  return {
    count: state
  }
}

// 将redux中的操作方法混入到组件的props中
const mapDispatchToProps = (dispatch) => {
  return {
    createIncrementAction: (value) => {
      dispatch(createIncrementAction(value))
    },
    createDecrementAction: (value) => {
      dispatch(createDecrementAction(value))
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(App)
// 简写 这种方式是内部api简写  mapDispatchToProps 中返回的函数会自动调用dispatch方法 修改状态值
// export default connect(mapStateToProps, {
  //createIncrementAction,
  //createDecrementAction
//})(App)