在react-redux应用程序中，我应该将非UI数据存储在哪里？

在React-Redux应用程序中，非UI数据通常存储在Redux的store中。Redux是一个用于JavaScript应用程序的状态管理库，它提供了一个集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

基础概念

Redux的核心概念包括：

• Store：存储应用的状态。
• Actions：描述发生了什么。
• Reducers：根据Actions来更新状态。
• Selectors：用于从store中提取数据。

优势

• 集中管理状态：使得状态管理更加清晰和可预测。
• 组件解耦：组件不再直接管理状态，而是通过Redux store来获取和更新状态。
• 易于调试：Redux提供了中间件支持，如Redux DevTools，可以方便地追踪状态变化。

类型

Redux的状态可以是任何类型的数据，包括但不限于：

• 对象
• 数组
• 字符串
• 数字
• 布尔值
• 函数（通过thunks或其他中间件）

应用场景

任何需要跨组件共享的状态都适合存储在Redux store中，例如：

• 用户认证信息
• 应用配置
• 全局通知
• 购物车内容

问题与解决

如果你遇到非UI数据存储的问题，可能是由于以下原因：

1. 状态管理不当：确保所有需要共享的状态都放在Redux store中，而不是在组件内部。
2. 不必要的重新渲染：使用useSelector钩子时，确保选择器函数是纯函数，并且只返回必要的数据，以避免不必要的组件重新渲染。
3. 性能问题：如果store中的数据量很大，考虑使用reselect库创建记忆化选择器来优化性能。

示例代码

以下是一个简单的Redux设置示例：

// actions.js
export const ADD_TODO = 'ADD_TODO';

export const addTodo = (text) => ({
  type: ADD_TODO,
  payload: text,
});

// reducers.js
import { ADD_TODO } from './actions';

const initialState = {
  todos: [],
};

const todoReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todos: [...state.todos, action.payload],
      };
    default:
      return state;
  }
};

export default todoReducer;

// store.js
import { createStore } from 'redux';
import todoReducer from './reducers';

const store = createStore(todoReducer);

export default store;

参考链接

• Redux官方文档
• React-Redux官方文档
• Redux DevTools

通过以上信息，你应该能够理解如何在React-Redux应用程序中存储和管理非UI数据。