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中间件。

状态更改后组件未更新

1 个答案: