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> 
   {
     /*  */}
  <Provider store={
     store}>
    <App />
    </Provider>
  {
     /*  */}
  </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.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/