combineReducers gây code để phá vỡ

Question

Đây là tiếp theo với chủ đề tôi đăng here

Sau rất nhiều xử lý sự cố tôi thấy rằng mã này hoạt động mà không bất kỳ vấn đề

import React from 'react'; 
import { createStore, combineReducers, applyMiddleware } from 'redux'; 
import createLogger from 'redux-logger'; 
import thunkMiddleware from 'redux-thunk'; 
import { Provider } from 'react-redux'; 
import DataTableReducer from './reducers/DataTableReducer'; 
import DimensionPickerReducer from './reducers/DimensionPickerReducer'; 

const loggerMiddleware = createLogger(); 
const store = createStore(
    DimensionPickerReducer, 
    applyMiddleware(
     thunkMiddleware, 
     loggerMiddleware 
    ) 
); 

export default store; 

Nhưng nếu tôi thay thế giảm duy nhất của tôi với một kết hợp cuộc gọi giảm tốc như

import React from 'react'; 
import { createStore, combineReducers, applyMiddleware } from 'redux'; 
import createLogger from 'redux-logger'; 
import thunkMiddleware from 'redux-thunk'; 
import { Provider } from 'react-redux'; 
import DataTableReducer from './reducers/DataTableReducer'; 
import DimensionPickerReducer from './reducers/DimensionPickerReducer'; 

const loggerMiddleware = createLogger(); 
const store = createStore(
    combineReducers({ 
     DataTableReducer, 
     DimensionPickerReducer 
    }), 
    applyMiddleware(
     thunkMiddleware, 
     loggerMiddleware 
    ) 
); 

export default store; 

Tôi ngay lập tức bắt đầu nhận được lỗi bởi kiểm soát DimensionPicker rằng đạo cụ bắt buộc không được chỉ định.

Vì vậy, phương pháp combinedReducer không hoạt động đối với tôi.

Tôi đã tải lên một dự án mẫu tại đây hiển thị sự cố.

https://github.com/abhitechdojo/MovieLensReact

Bạn sẽ phải chạy npm install sau khi làm một git clone

Answer 1

Với gia giảm kết hợp cửa hàng của bạn sẽ có cấu trúc dữ liệu như thế:

{ 
    DimensionPickerReducer: { 
     dimenisionName: '', 
     pickerIsLoading: false, 
     pickerError: '', 
     currentAttribute: '', 
     attributeList: [] 
    }, 
    DataTableReducer: { 
     tableData: [], 
     tableIsLoading:false, 
     tableError: '' 
    } 
} 

Vì vậy, bạn nên điều chỉnh container của bạn để làm việc với cửa hàng kết hợp. Ví dụ trong DimensionPickerContainer.js bạn nên thay đổi mapStateToProps chức năng:

const mapStateToProps = (state) => { 
    return { 
     attributeList : state.DimensionPickerReducer.attributeList, 
     currentAttribute : state.DimensionPickerReducer.currentAttribute 
    } 
} 

Bạn cũng có thể đặt tên làm giảm của bạn trong cửa hàng, vì vậy họ sẽ không nhìn xấu xí trong cấu trúc dữ liệu. Ví dụ. combineReducers({ dimensionPicker: DimensionPickerReducer, dataTable: DataTableReducer})