Как использовать Redux с React

Question

Что я просто хочу получить данные из API и показать его на веб-интерфейсе. Я использую Redux для вызова API, используя ACTIONS и REDUCERS . В редукторах я принимаю состояние в качестве пустого массива. Когда API успешно вызывается, я обновляю состояние хранилища. Ниже приведены практические рекомендации, которые могут помочь легко понять концепцию.

store.js

import { createStore } from 'redux';
import reducer from './reducers/reducer';

let store = createStore(reducer)
export default store

actions.js

import { 
 FETCH_IMAGES_SUCCESS
} from './actionTypes'

export function fetchImages() {
  return dispatch => {
   return fetch("https://api.com/data")
   .then(res => res.json())
   .then(json => {
     dispatch(fetchImagesSuccess(json.posts));
    return json.posts;
   })
  };
}

export const fetchImagesSuccess = images => ({
  type: FETCH_IMAGES_SUCCESS,
  payload: { images }
});

reducer.js

import {
 FETCH_IMAGES_SUCCESS
} from '../actions/actionTypes'

const initialState = {
 images:[] 
}

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_IMAGES_SUCCESS:
     return {...state,images:action.payload.images}
    default:
     return state
  }
}

export default reducer;

Теперь, пожалуйста, скажите мне, что мне нужно сделать, чтобы вызвать это действие Redux и получить данные из API. Я использую React для отображения данных.

Спасибо.

Answer 1

Вам необходимо использовать mapStateToProps, аналогичный приведенному ниже коду.Допустим, ваш редуктор называется test, и он является частью состояния.

const mapStateToProps = (state, props) =>
({
    router: props.router,
    test: state.test
});

Тогда test будет использоваться как свойство в классе React.Очевидно, что вы должны включить соответствующий импорт для React.

Answer 2

На странице React redux вы можете использовать такие функции, как mapStateToProps и подключиться, чтобы сделать это

Answer 3

Как сказал Мустафа, вам нужно использовать mapStateToProps. Позвольте мне объяснить.

То, что вы только что сделали, это просто конфигурация для основного хранилища (есть только один в резерве). Теперь вам нужно использовать его в ваших компонентах, но как? При создании компонента содержимое store будет передано как props с помощью Containers.

Контейнеры - это способ связать ваш магазин с вашим реактивным компонентом.

Сказал, что вам нужно установить redux и react-redux. В приведенном выше коде вы успешно настроили хранилище с редукторами с библиотекой redux. Теперь вам нужно react-redux, чтобы создать Контейнер (который оборачивает ваш реактивный компонент).

Вот пример того, как собрать все это вместе: https://codepen.io/anon/pen/RqKyQZ?editors=1010

Answer 4

Вам необходимо промежуточное программное обеспечение, такое как Redux-Saga или Redux-Thunk , чтобы общаться с действиями и глобальным хранилищем, поддерживаемым с помощью Redux.Вы можете следовать этому уроку: https://redux.js.org/basics/exampletodolist

Если вы собираетесь использовать Redux-Thunk, вам нужно изменить свое назначение магазина следующим образом:

const store = createStore(rootReducer, applyMiddleware(thunk));

Теперь у вас есть контейнер для всехРодительский компонент у вас есть.

import { connect  } from 'react-redux';
import App from '../components/App';


export function mapStateToProps(appState) {

  return {
  /* this is where you get your store data through the reducer returned 
  state */
  };
}

export function mapDispatchToProps(dispatch) {
  return {
   // make all your action dispatches here
// for ex: getData(payload) => dispatch({type: GETDATA, payload: payload})

  };
}

export default connect(mapStateToProps, mapDispatchToProps)(App);