Redux 学习系列（二） —— 实现一个计数器

目录结构：

src |
   -| App.js
   -| index.css
   -| index.js
   views |
     commponents |
       count |
            -| index.jsx
   redux | 
         actions |
                -| count.js
         reducers |
                 -| count.js
         store |
              -| index.js
         -| Constans.js

创建一个 redux 文件夹，分别创建以下文件：

views/redux/store/index.js：

/* 
	用于暴露一个store对象，整个应用只有一个store对象
*/

// 引入createStore，专门用于创建redux中最为核心的store对象
import {
    createStore } from 'redux'
//引入为Count组件服务的reducer
import countReducer from '../reducers/count'
const store = createStore(countReducer)
//暴露store
export default store

views/redux/Constans.js：

/**
  定义action对象中type类型的常量值：便于管理的同时防止程序员单词写错
 */
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

views/redux/reducers/count.js：

/* 
  1.创建一个为Count组件服务的reducer，reducer的本质就是一个函数
  2.reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)
*/
import {
    INCREMENT, DECREMENT } from '../Constants'

const initState = 0 //初始化状态
export default function countReducer (preState = initState, action) {
   
  // console.log(preState);
  // 从action对象中获取：type、data
  const {
    type, data } = action
  // 根据type决定如何加工数据
  switch (type) {
   
    case INCREMENT: //如果是加
      return preState + data
    case DECREMENT: //若果是减
      return preState - data
    default:
      return preState
  }
}

views/redux/actions/count.js：

/**
  为Count组件生成action对象
*/
import {
    INCREMENT,