时间戳

首页 > 解决方案 > React 和 Redux：创建要在项目中使用的变量

javascript - React 和 Redux：创建要在项目中使用的变量

问题描述

当用户登录时，我正在尝试在项目中创建一个控制器。

基本上我会保存一些值，不是在数据库中，而是在我可以在项目中使用的一些变量中。

在我的想法中，这是用户应该执行的操作：

  1. 用户第一次登录时，用户将被重定向到一个表单，应该为两个变量选择一些值（我想保存这些值，它们将用于预填充项目中的某些字段） - POST -

  2. 用户可以更改这些值 - PUT -

  3. 检索保存的数据 - GET -

所以我正在尝试创建一个reducer 页面，来管理他可以做的这3 个“动作”。

这是第一次创建这种类型的减速器/动作，所以：

import { REQUEST, SUCCESS, FAILURE } from 'app/shared/reducers/action-type.util';
export const ACTION_TYPES = {
    FETCH_DATA : 'FETCH_DATA',
    CREATE_DATA : 'CREATE_DATA',
    UPDATE_DATA : 'UPDATE_DATA'
};

export interface PersonInfo {
    info: {
        role?: string | number,
        environment ?: string | number
    }

}




const initialState: PersonInfo =  {
  info: {
      role: '',
      environment : ''
  }
}

// reducers

export default (state: PersonInfo=initialState, action): PersonInfo => {
    switch( action.type ){
        case REQUEST(ACTION_TYPES.FETCH_DATA):
            console.log("FETCH DATA ", state)
            return {
                ...state
            };
        case REQUEST(ACTION_TYPES.CREATE_DATA):
        case REQUEST(ACTION_TYPES.UPDATE_DATA):
        case FAILURE(ACTION_TYPES.FETCH_DATA):
        case FAILURE(ACTION_TYPES.CREATE_DATA):
        case FAILURE(ACTION_TYPES.UPDATE_DATA):
        case SUCCESS(ACTION_TYPES.FETCH_DATA):
            return {
                ...state
            };
        case SUCCESS(ACTION_TYPES.CREATE_DATA):
        case SUCCESS(ACTION_TYPES.UPDATE_DATA): 
            return {
                ...state
            };
        default:
            return state;
    }
}

// now I need to create the actions, and there I have some problems..

// 3. This should be the action to fetch data and to see if the values are populated
export const getData = info =>  {
    return {
        type: ACTION_TYPES.FETCH_DATA,
        payload: info
    }
}

// 1. This should be the action to post data in the variables: (but I don't think it does anything useful .. I should connect my initialState to this function i believe)

  export const createData = entity =>  {
    const userInfo = {
        role: entity.role,
        environment: entity.environment
    }
    const result = ({
      type: ACTION_TYPES.CREATE_DATA,
      payload: userInfo
    });
    console.log("result ", result)
    return result;
  };

所以我的问题是，我怎样才能修复这个动作/减速器工作？

谢谢

标签： javascriptreactjstypescriptreact-redux

解决方案

您需要像处理单个组件中的状态一样对待这些选项，但要考虑到它是针对您的全局状态（因此，Redux）。如果您的树没有分支到组件 A 无法与组件 B 对话的地方，并且您在任何一种情况下都需要访问此状态，并且您不会不断更改此状态，我建议您使用useContext而不是 Redux。这是 React 中的一个基本概念，状态不是“RESTful”。你要么初始化它，设置它，要么读取它。

花 13 分钟在 useContext 上观看此视频

推荐阅读