#yyds干货盘点#redux的简单使用
  Qp5JTyIxtbwu 2023年11月02日 28 0

store文件夹

  • index.js
// 1. 引入redux的创建store方法 createStore
  import { createStore } from 'redux';
  
  // 2. 引入reducer
  import reducer from 'reducer';
  
  // 3. 使用createStore方法,并传入reducer
  const store = createStore(
    reducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() // 使用redux谷歌插件
  );
  
  // 4. 讲store暴露出去
  export default store;
  • reducer.js
// 引入actionTypes.js
  import { ACTION_TYPE } from './actionTypes'
  
  // 1. 定义state的默认值
  const defaultState = {
      data: []
  };
  
  // 2. 暴露函数
  export default (state = defaultState, action) => {
   // 4. 通过接收的action参数判断下一步操作
   if(action.type === ACTION_TYPE) {
     // 5. 深拷贝state
     const newState = JSON.parse(JSON.stringify(state));
     
     // 6. 对newState的数据进行修改
     newState.data = action.value;
     
     // 7. 将newState返回
     return newState;
   }
      // 3. 返回state
      return state;
  }
  • actionTypes.js
  //统一管理redux的actionde type属性,杜绝代码错误,有利于工程化
  export const ACTION_TYPE = 'action_type;
  • actionCreators.js
// 引入actionTypes.js
  import { ACTION_TYPE } from './actionTypes'
  // action创建器,有利于自动化测试
  export const getAction = (value) => ({
    type: ACTION_TYPE,
    value
  })

Component.js

import React, { Component } from 'react';
  // 1. 引入store
  import store from './store';
  
  // 2. 引入actionCreators.js中创建action的方法
  import { getAction } from './store/actionCreators';
  
  class App extends Component {
    render(){}
    
    handelGetAction(){
      const value = 'aa';
       
      // 3. 调用action创建方法
      const action = getAction(value);
      
      // 4. 派发action
      store.dispatch(action);
    }
  }
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
Qp5JTyIxtbwu