如何使用我的 redux 商店中的数据更新我的组件答案

【问题标题】：How do I update my component with data from my redux store如何使用我的 redux 商店中的数据更新我的组件
【发布时间】：2019-10-31 22:52:17
【问题描述】：

我已成功地将 redux 集成到我的应用中。我正在从发送到数据库的表单中获取数据，并使用 eventListener (redux-saga) 将数据更新到我的存储中。

使用 Redux DevTools，我在我的商店中看到了数据，但我的组件没有显示数据。我正在使用 react-redux 中的 useSelector 钩子。

我的组件：

export const DisplayUser = () => {
  const { db } = useSelector(state => state.data.db);
  var count = 0;
  return (
    <Table striped bordered hover>
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Email</th>
          <th>Age</th>
          <th>Birthday</th>
          <th>Hobby</th>
        </tr>
      </thead>
      <tbody>
        {db ? (
          db.map(data => {
            return (
              <tr key={count++}>
                <td>{data.fname}</td>
                <td>{data.lname}</td>
                <td>{data.email}</td>
                <td>{data.age}</td>
                <td>{data.birth}</td>
                <td>{data.hobby}</td>
              </tr>
            );
          })
        ) : (
          <p>Please fill the form</p>
        )}
      </tbody>
    </Table>
  );
};

这是我的应用程序的屏幕截图。

这是我最近提交的输入的 redux 商店的屏幕截图：

这是我的减速器的代码：

import {
  SAVE_FORM,
  UPDATE_STORE
} from "../actions/types";

const initialState = {
  sent: [],
  db: ""
};

export default function (state = initialState, action) {
  switch (action.type) {
    case SAVE_FORM:
      return {
        ...state,
        sent: [action.payload]
      };
    case UPDATE_STORE:
      return {
        db: [action.payload]
      };
    default:
      return state;
  }
}

【问题讨论】：

提交时是否有任何动作被调度？如果没有组件重新渲染，UseSelector 可能无法自行运行，这可能会丢失您的拼图。 The selector will be run whenever the function component renders. useSelector() will also subscribe to the Redux store, and run your selector whenever an action is dispatched.
发送的动作是将表单条目发送到数据库。 @Rikin

标签： reactjs react-native redux react-redux redux-saga

【解决方案1】：

您不需要从选择器的结果中解构db。您已经选择了db 键。将您的选择器更新为：

const db = useSelector(state => state.data.db);

你应该很高兴。

【讨论】：