react redux的简单使用

index.js

import React from 'react'; //react 模板
import ReactDOM from 'react-dom'; //  jax语法
import './index.css';// 全局样式
import App from './App'; // 主要模块
import * as serviceWorker from './serviceWorker'; //渲染问题
import { BrowserRouter } from "react-router-dom"; //路由

import { Provider } from 'react-redux'; // 数据传递 
import store from './redux/store'; // store 数据管理

ReactDOM.render(
  // BrowserRouter===Router
  <BrowserRouter> 
   {/* <React.StrictMode> */}
  <Provider store={store}>
    <App />
    </Provider>
  {/* </React.StrictMode> */}
  </BrowserRouter>,
  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();

store.js

import { createStore,combineReducers } from "redux";
// import reducers from '../reducers';

// 单数据合并
// const initialState = {
//   number: 11,
// };

// const reducers = (state = initialState, action) => {
//   switch (action.type) {
//     // case actionTypes.ADD_TEST:
//     case "1":
//       return {
//         ...state,
//         number: action.number + 1,
//       };
//     default:
//       return state;
//   }
// };
//---------------------------------------------------------------
const initialState = {
  number: 11,
};
const doSomethingWithA = (state = initialState, action) => {
  switch (action.type) {
    // case actionTypes.ADD_TEST:
    case "1":
      return {
        ...state,
        number: action.number + 1,
      };
    default:
      return state;
  }
};
// 多数据合并
const reducers = combineReducers({
  a: doSomethingWithA,
  // b: processB,
  // c: c
})

// 等同于
// function reducer(state = {}, action) {
//   return {
//     a: doSomethingWithA(state.a, action),
//     b: processB(state.b, action),
//     c: c(state.c, action)
//   }
// }
const store = createStore(reducers,{a:{number:33}});//vue data 函数创建不同的 store  覆盖默认值


console.log(store,'=================')
console.log(store.getState(), " store.getState();==============="); //获取数据

let time=store.subscribe (function(res){  //vue watch方法 改变监听(定时器 )
  console.log(res,'================')
})
time() //删除功能
store.dispatch ({                 // 更新了    //方法处理
  // type: actionTypes.ADD_TEST,
  type:'1',
  number: store.getState().a.number
})


export default store;

redux.js

import React, { Component } from "react";

import Childredux from "./childredux";

// import { actionTypes} from '../../redux/action';
import { connect } from "react-redux";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.handleBtnClick = this.handleBtnClick.bind(this);
    this.handleBtnClick1 = this.handleBtnClick1.bind(this);
  }
  handleBtnClick() {
    const { dispatch } = this.props;
    const action = {
      // type: actionTypes.ADD_TEST,
      type: "1",
      number: this.props.number,
      };

    dispatch(action); //通过dispatch修改store数据
  }
  handleBtnClick1() {
    this.props.deleteFromArray({ type: "1", number: 12 });
  }
  render() {
    const { PayDecrease ,PayDecrease1} = this.props;
    return (
      <div>
        {/* <button onClick={this.handleBtnClick}>自增</button> */}
        {/* ============================================================== */}
        <button onClick={this.handleBtnClick1}>自增this.handleBtnClick1</button>
        {/* //mapDispatchToProps */}
        <button onClick={PayDecrease)}>自增(PayDecrease,mapDispatchToProps)</button>
        <button
          onClick={() => {PayDecrease1(this.props.number) }}
        >
          自增(PayDecrease1,mapDispatchToProps)
        </button>
         {/* //获取store中的数据 */}
        <p>{this.props.number}</p>
        <Childredux></Childredux>
      </div>
    );
  }
}
// 将数据插入 state中 
const mapStateToProps = (state) => {
  return {
    // number: state.number //单个数据
    number: state.a.number, //多个数据
  };
};

//需要触发什么行为
function mapDispatchToProps(dispatch) {
  return {
    deleteFromArray: (array) => {
      console.log(array,'==============   {/* //mapDispatchToProps */}')
      dispatch(array)
    },
    PayDecrease1: (val) =>{
      console.log(val,'============val')
      dispatch({ type: "1", number: val })
    } ,
    PayDecrease: (val) =>{

     return dispatch({ type: "1", number: 10 })
    } ,
  };
}
/ export default connect(mapStateToProps)(App);

export default connect(mapStateToProps, mapDispatchToProps)(App); // mapDispatchToProps

参考链接https://daveceddia.com/courses/