Компонент не обновляется после изменения состояния - PullRequest
Новая
       7

Компонент не обновляется после изменения состояния

0 голосов
/ 03 сентября 2018

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

Звонок выполняется и возвращается с сервера. Состояние меняется (в зависимости от того, какие у меня установлены инструменты-редукторы). Я старался не изменять состояние в любом случае, но, похоже, симптомы указывают на это направление.

Код Песочница всего приложения https://codesandbox.io/s/rl7n2pmpj4

Вот компонент. 

class RetailLocationSelector extends Component {

componentWillMount() {
    this.getData();
}
getData = () => {
    this.props.getRetailLocations()

}

render() {
    const {data, loading} = this.props;
    return (
        <div>
            {loading
                ? <LinearProgress/>
                : null}
            <DefaultSelector
                options={data}
                placeholder="Retail Location"/>
        </div>
    );
}
}

function mapStateToProps(state) {
    return {
        loading: state.retaillocations.loading, 
        data: state.retaillocations.data,
        osv: state.osv};
}

function mapDispatchToProps(dispatch) {
   return bindActionCreators({
       getRetailLocations,
       selectRetailLocation,
       nextStep
   }, dispatch);
}

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

А вот и мой редуктор: 

    import {REQUEST_RETAIL_LOCATIONS, SUCCESS_RETAIL_LOCATIONS, 
ERR_RETAIL_LOCATIONS, SELECT_RETAIL_LOCATION} from 
'../actions/RetailLocationsAction'

    const initialState = {
        data: [],
        loading: false,
        success: true,
        selectedRetailLocation: undefined
    }

    function retailLocation(state = initialState, action) {
        switch (action.type) {
            case REQUEST_RETAIL_LOCATIONS:
                return Object.assign({}, state, {
                    loading: true
                }, {success: true})
            case SUCCESS_RETAIL_LOCATIONS:
                return Object.assign({}, state, {
                    loading: false
                }, {
                    success: true
                }, {
                    data: Object.assign([], action.payload.data)
                })
            case ERR_RETAIL_LOCATIONS:
                return Object.assign({}, state, {
                    loading: false
                }, {
                    success: false
                }, {errorMsg: action.payload.message})
            case SELECT_RETAIL_LOCATION:
                return Object.assign({}, state, {
                    selectedRetailLocation: state
                        .data
                        .find((rec) => {
                            return rec.id === action.payload.id
                        })
                })
            default:
                return state;
        }
    }

    export default retailLocation

И, наконец, мой файл действий: 

import axios from 'axios';
//import {api} from './APIURL'

export const REQUEST_RETAIL_LOCATIONS = 'REQUEST_RETAIL_LOCATIONS'
export const SUCCESS_RETAIL_LOCATIONS = 'SUCCESS_RETAIL_LOCATIONS'
export const ERR_RETAIL_LOCATIONS = 'ERR_RETAIL_LOCATIONS'
export const SELECT_RETAIL_LOCATION = 'SELECT_RETAIL_LOCATION'
const URL = 'localhost/api/v1/retail/locations?BusStatus=O&LocType=C'

export const getRetailLocations = () => (dispatch) => {

    dispatch({ type: 'REQUEST_RETAIL_LOCATIONS' });
    return axios.get(URL)
    .then(data => dispatch({ type: 'SUCCESS_RETAIL_LOCATIONS', payload: data }))
    .catch(error => dispatch({type : 'ERR_RETAIL_LOCATIONS', payload: error}));


}

Комбинированный редуктор 

import { combineReducers } from "redux";
import retailLocations from './RetailLocationsReducer'
import vendors from './VendorsReducer'
import receiptInformation from './ReceiptInfoReducer'
import osv from './OSVReducer'
import receiptDetail from './ReceiptDetailReducer'

const allReducers = combineReducers({
retaillocations: retailLocations,
vendors: vendors,
receiptInformation: receiptInformation,
receiptDetail: receiptDetail,
osv: osv

});

export default allReducers;

1 Ответ

0 голосов
/ 04 сентября 2018

Этот ответ не решает полностью вашу проблему, но дает некоторые подсказки о том, что не работает. Разбитая часть - это ваше store определение. У меня нет большого опыта работы с redux-devtools-extension или redux-batched-subscribe, но если вы определите свой магазин таким образом, ваша функция thunk будет работать: 

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

Одна из конфигураций для вышеупомянутых пакетов нарушает ваше thunk промежуточное ПО.

...