Реагировать на избыточность - как получить данные в каждом компоненте после ответа API, написанного на Reducer

Question

я новичок в редуксе и реакции.

Я только что прошел какое-то урок по редуксу и начал реализовывать несколько случаев судебного преследования ... И один вариант использования, который мне действительно нужен, - это то, что мне нужно состояние, в которое я должен войтивсе компоненты, так что это возможно с избыточным глобализированным состояниемНо этого не происходит.

У меня есть index.js как

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { createStore } from "redux";
import allReducer from "./reducers";
import { Provider } from "react-redux";

import "./styles.css";


let store = createStore(
  allReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
);

Мой редуктор как

var userArray = [];
fetch("https://jsonplaceholder.typicode.com/users")
  .then(res => res.json())
  .then(
    result => {
      console.log(result);
      userArray = result;
    },

    error => {}
  );

const IsLoggedReducer = (state, action) => {
  console.log(userArray);
  switch (action.type) {
    case "SIGNIN":
      return (state = userArray);
    case "LOGGEDOUT":
      return (state = userArray);
    default:
      return (state = userArray);
  }
};
export default IsLoggedReducer;

и мой app.js как

import React from "react";
import { useSelector } from "react-redux";

function App() {
  const counter1 = useSelector(state => state.counterReducer);
  const isLogged = useSelector(state => state.IsLoggedReducer);

  return (
    <h1>
      This {counter1}
      <ul>
        {isLogged.length > 0
          ? isLogged.map(item => {
              return <li key={item.id}>{item.name}</li>;
            })
          : "No data"}
      </ul>
    </h1>
  );
}

export default App;

когда при начальной загрузке он приходит в виде нулевого массива, а когда я делаю некоторые изменения в компоненте и сохраняю его, он получает данные и заполняется ..

Вот код https://codesandbox.io/embed/quirky-sunset-s95gu?fontsize=14

Любая помощь очень ценится

Answer 1

Я надеюсь, что эти простые коды для действий и редукторов помогут вам понять response-redux.

Для action,

export const signin = (userArray) => {
  return {
    type: "SIGNIN",
    payload: userArray,
  };
};

export const loggedout = (userArray = []) => {
  // You can do something for making users logged out here using userArray and return changed value using payload
  // Or just return [] as payload because it's logged out
  return {
    type: "LOGGEDOUT"
    payload: userArray,
  };
};

export const initiate = (userArray) => {
  return {
    type: "INITIATE",
    payload: userArray,
  }
}

Для reducer, пожалуйста, рассмотрите редуктор как сменщикof state.

const IsLoggedReducer = (state = initialState, action) => {
  switch (action.type) {
    case "SIGNIN":
      return action.payload;
    case "LOGGEDOUT":
      return action.payload;
    case "INITIATE":
      return action.payload;
    default:
      return state;
  }
};

Когда дело доходит до вызова api, я хочу порекомендовать использовать redux-saga или redux-thunk, но если вам нужно вызывать api только один раз в начале компонента. Вы можете использовать useEffect (https://reactjs.org/docs/hooks-effect.html), поскольку componentDidMount используется для вызова API в компоненте класса.

И я надеюсь, что этот код useEffect поможет вам получить чувство

import { useSelector, useDispatch } from 'react-redux';
import { initiate } from 'actions';

function main () {
  const state = useSelector((state) => state.user);
  const dispatch = useDispatch();
  const onInit = useCallback((data) => dispatch(initiate(data), [dispatch]);

  useEffect(() => {
    // call api and get response
    const userArray = fetch();

    onInit(userArray);
  }, []);

  return (<div>...</div>);
}

Answer 2

Хорошо, вы не делаете некоторые вещи правильным образом

1 - Поскольку вызов API является асинхронной задачей, поэтому вам нужно ее обработать, я бы порекомендовал написать создателя действия, который выполняет этот вызов API для васи когда вы получите ответ от API, отправьте соответствующее действие для обновления состояния хранилища.

2 - В вашем редукторе вы изменяете состояние, не изменяйте предыдущее состояние, вместо этого возвращайте новый объект состояния изпредыдущее состояние

Надеюсь, это поможет