Как я могу обновить свой компонент с данными из моего магазина притока - PullRequest
Новая
       38

Как я могу обновить свой компонент с данными из моего магазина притока

1 голос
/ 01 ноября 2019

Я успешно интегрировал Redux в свое приложение. Я извлекаю данные из формы, которая отправляет в базу данных, и с помощью eventListener (redux-saga) данные обновляются в моем хранилище.

Используя Redux DevTools, я вижу данные в своем хранилище, но мойКомпонент не показывает данные. Я использую ловушку useSelector от Reaction-redux.

Мой компонент: 

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>
  );
};

А вот скриншот моего приложения. appshot

Вот скриншот моего редукционного магазина с недавно отправленным вводом: redux-shot

Вот код моего редуктора: 

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;
  }
}

1 Ответ

0 голосов
/ 01 ноября 2019

Вам не нужно уничтожать db из результатов вашего селектора. Вы уже нажимаете клавишу db. Обновите ваш селектор:

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

, и вы должны быть в порядке.

...