状态更改后组件未更新

Question

我在这里已经读完了100个这些线程，而且似乎无法理解为什么我的组件没有更新。 我很确定这与不可变性有关，但我无法弄清楚。

正在进行呼叫，并且正在从服务器返回呼叫。 状态正在改变（基于我已安装的redux-Dev-Tools）。我确保在任何情况下都不会改变状态，但是症状似乎指向该方向。

整个应用程序的代码沙箱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;

Answer 1

这个答案不能完全解决您的问题，但可以提供一些有关什么不起作用的提示。 损坏的部分是您的store定义。 我对redux-devtools-extension或redux-batched-subscribe并没有太多的经验，但是如果您像这样定义自己的商店， thunk函数就可以工作：

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

上面提到的软件包的一种配置破坏了您thunk中间件。