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

Question

我已经成功地将 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;
  }
}

标签： reactjsreact-nativereduxreact-reduxredux-saga

Answer 1

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

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

你应该很高兴。