react_redux_demo

// ./src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
// 1. 引入一个 连接仓库和组件的连接组件
import { Provider } from "react-redux"
// 2. 引入仓库
import store from "./store"
//3. 配置到App节点上
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

// ./src/App.js
import React, { Component } from 'react'
// 1. 引入连接器 将属性和行为  注入到组件中
import { connect } from "react-redux"
// 引入 actions
import { addAction, subAction } from "./store/actionCreator"
class App extends Component {
  render() {
    return (
      <div>
        <button onClick={this.props.addNum}>+</button>
        {this.props.num}
        <button onClick={this.props.subNum}>-</button>
      </div>
    )
  }
}
// 将仓库中的 数据 映射到 组件中
const mapStateToProps = (state) => {
  return {
    num: state.numReducer.num
  }
}
// 将行为 注入到 组件中
const mapDispatchToProps = (dispatch) => {
  return {
    // + 
    addNum: function () {
      dispatch(addAction);
    },
    subNum: function () {
      dispatch(subAction);
    }
    // - 
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(App)

// ./src/store/render/reducer/numReducer.js
import { ADD, SUB } from "../actionTypes"
const defaultState = {
    num: 888
}
export default function (state = defaultState, action) {
    // 纯函数操作
    let newState = Object.assign({}, state);
    switch (action.type) {
        case ADD:
            newState.num = state.num + action.payload.num;
            break;
        case SUB:
            newState.num = state.num + action.payload.num;
            break;
        default:
            break;
    }
    return newState;
}

// ./src/store/actionCreator/index.js
// { type:"ADD",payload:{ num:1 }}
import { ADD, SUB } from "../actionTypes"
const addAction = { type: ADD, payload: { num: 1 } };
const subAction = { type: SUB, payload: { num: -1 } };
export { addAction, subAction };

// ./src/store/actionTypes/index.js
const ADD = "ADD"
const SUB = "SUB"
export { ADD, SUB }

// ./src/store/reducer/index.js
// 1. 引入合并reducer 的函数
import { combineReducers } from "redux"
//2. 引入合并的reducer
import numReducer from "./numReducer"
//3. 导出合并之后 reducer
export default combineReducers({ numReducer: numReducer })