React Native Connect Redux Action & Reducer - PullRequest
Новая
       29

React Native Connect Redux Action & Reducer

0 голосов
/ 26 декабря 2018

Я пытался подключить Redux Action and Reducer к моему компоненту.Но, похоже, он не работает должным образом.

В настоящее время, когда я вызываю свое Действие, оно попадает в это Действие, но не перемещается на мой редуктор.Я думаю, что что-то здесь упускаю, но мне трудно понять, в чем проблема.

Может кто-нибудь помочь мне с этим вопросом?

Спасибо.

Здесьэто мое действие: 

export const getItem = () => {
  return (dispatch, getState) => {
    debugger;
    dispatch({
      type: 'API_REQUEST',
      options: {
        method: 'GET',
        endpoint: `18.222.137.195:3000/v1/item?offset=0`,
        actionTypes: {
          success: types.GET_ITEM_SUCCESS,
          loading: types.GET_ITEM_LOADING,
          error: types.GET_ITEM_SUCCESS
        }
      }
    });
  };
};

Вот мой редуктор: 

export const initialState = {
 getItem: {}
};

const registerItemReducer = (state = initialState, action) => {
 switch (action.type) {
  case types.GET_ITEM_LOADING:
   debugger;
   return { ...state, loading: true, data: null };

  case types.GET_ITEM_SUCCESS:
   debugger;
   return { ...state, loading: false, getItem: action.data};

  case types.GET_ITEM_ERROR:
   debugger;
   return { ...state, loading: false, error: action.data};

  default: {
   return state;
  }
 }
}
export default registerItemReducer;

Вот мой магазин: 

/* global window */
import { createStore, applyMiddleware, compose } from 'redux';
import { persistStore, persistCombineReducers } from 'redux-persist';
import storage from 'redux-persist/es/storage'; // default: 
localStorage if web, AsyncStorage if react-native
import thunk from 'redux-thunk';
import reducers from '../reducers';

// Redux Persist config
const config = {
  key: 'root',
  storage,
  blacklist: ['status'],
};

const reducer = persistCombineReducers(config, reducers);

const middleware = [thunk];

const configureStore = () => {
  const store = createStore(
    reducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && 
window.__REDUX_DEVTOOLS_EXTENSION__(),
    compose(applyMiddleware(...middleware)),
  );

  const persistor = persistStore(
    store,
    null,
    () => { store.getState(); },
  );

  return { persistor, store };
};

export default configureStore;

Наконец, вот мой компонент, который имеет «подключиться»"part & componentDidMount: 

componentDidMount() {
    this.props.getItem();
 }

const mapStateToProps = state => ({
  registerItem: state.registerItem || {},
});

const mapDispatchToProps = {
  getItem: getItem
};

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

1 Ответ

0 голосов
/ 27 декабря 2018

Является ли registerItem именем вашего редуктора?Ваш редуктор имеет два состояния getItem и loading.Но в приведенном ниже коде вы вызываете state.registerItem.Похоже, что существует некоторое несоответствие между фактическим состоянием и отображенным состоянием.

В приведенном ниже коде попытайтесь напечатать значение состояния, оно поможет вам перейти к нужному параметру.

Добавьте следующую строку в существующий код для отладки: 

const mapStateToProps = state => ({
 console.log("State of reducer" + JSON.stringify(state));
 registerItem: state.registerItem || {},
});
...