redux（二）02-基于redux开发步骤——创建Store-数据源两项职能：存储数据和修改数据

基于redux开发步骤——创建Store-数据源两项职能：存储数据和修改数据

• 安装相关包

  • yarn add redux
  • yarn add react-redux

• 创建Store

  src/store.js——创建数据源

/*
  唯一的数据源
*/
import {createStore} from 'redux';
import reducer from './Reducer.js';

// 初始数据
const initValues = {
  apple: 0,
  orange: 0,
  banana: 0
};

// 创建数据源
// 数据源有两项职能：1、存储数据；2、修改数据
// createStore方法
//   参数一：用于处理数据修改
//   参数二：用于提供初始化数据
const store = createStore(reducer, initValues);
export default store;

• 创建reducer

  src/Reducer.js

/*
  提供数据修改操作:不要直接修改state数据，而是先复制一份原有数据，修改之后再返回即可

  根据action修改state中相应的数据
*/
/*
  参数一state表示唯一的数据源
  参数二action表示视图中触发的action
*/
export default (state, action) => {
  let newState = null
  switch(action.type){
    case 'add':
      // 控制商品数量加一
      newState = {...state}
      newState[action.pname] = newState[action.pname] + 1
      return newState
    case 'sub':
      // 控制商品数量减一
      newState = {...state}
      let num = newState[action.pname]
      if (num > 1) {
        newState[action.pname] = num - 1
      }
      return newState
    default:
      return state
  }
}

• 入口文件——App.js

import React from 'react';
import ReactDOM from 'react-dom';
// 用于提供数据   // Provider用于向View组件提供Store数据
import {Provider} from 'react-redux';
// 视图组件
import Cart from './views/Cart.js';
// 数据存储
import store from './Store.js';
import './index.css';
ReactDOM.render(
   {/* Provider包裹住Cart组件之后，Cart所有的子组件都可以获取到这个唯一的数据源store*/}
  <Provider store={store}>
    <Cart/>
  </Provider>,
  document.getElementById('root')
);

• 视图文件内容
  • 处理模板
  • 处理数据绑定
    • 把Store上的状态转化为内层傻瓜组件的的props
    • 把内层傻瓜组件中的用户动作转化为派送给Store的动作