在react中实现vuex的效果：redux

使用redux实现计数器

创建如下的react项目,我习惯把每一个模块分块,才有这么多文件,当然你也可以写在一个js文件中,这不是重点

首先我们看一下项目的入口文件index.js

 

import 'core-js/fn/object/assign';
import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './components/Counter'; //引入计数器件
import {createStore} from 'redux'; //通过解构赋值得到createStore,为store的创建做准备
import reducer from './reducers/index' //引入reducer纯函数 该函数,根据action的type不同结合旧的state返回新的state
let store = createStore(reducer); //创建redux的核心 store store我会在后面进行详细的解答
import {numAdd,numDel} from './actions/index'; //引入action函数,触发什么操作,就根据操作怎样改变值

// Render the main component into the dom
//这里使用Redducer变量来定义ReactDOM中的render函数,是方便store中state更新之后,页面的渲染
const Redducer = () =>{
  ReactDOM.render(
    <Counter     
      value={store.getState()} 
      add ={()=>store.dispatch(numAdd())}
      del ={()=>store.dispatch(numDel())}
    ></Counter>,
    document.getElementById('app')
  );
};
// value={store.getState()} 给展示组件Counter传递数据 这里的store.getState()得到的值,就是store创建过程中reducer纯函数里面的初始state值
// ()=>store.dispatch(numAdd())和()=>store.dispatch(numDel()) 定义函数传递给展示组件Counter
//store.dispatch(参数)会传递一个对象作为参数例如{typ