React Redux Reducer從狀態獲取數據？

Question

嘗試弄亂react和redux以從API獲取文件列表。

當查看react dev工具時，我可以在那里看到我的數據，但是沒有被渲染。

actions.js

export const requestFiles  = ({
    type: REQUEST_FILES,
});

export const receiveFiles = (json) => ({
    type: RECEIVE_FILES,
    files: json,
    receivedAt: Date.now()
});


export const fetchFiles = (dispatch) => {
    dispatch(requestFiles);
    return fetch('/api/files')
        .then(response => response.json())
        .then(json => dispatch(receiveFiles(json)))
};

該動作從JSON獲取數據

reducer.js

const files = (state = {
    isFetching: false,
    items: []
}, action) => {
    switch (action.type) {
        case REQUEST_FILES:
            return {
                ...state,
                isFetching: true,
            };
        case RECEIVE_FILES:
            return {
                ...state,
                isFetching: false,
                items: action.files,
                lastUpdated: action.receivedAt
            };
        default:
            return state
    }
};

const filesUploaded = (state = { }, action) => {
    switch (action.type) {
        case RECEIVE_FILES:
        case REQUEST_FILES:
            return {
                ...state,
                items: files(state[action], action)
            };
        default:
            return state
    }
};

const rootReducer = combineReducers({
    filesUploaded
});

export default rootReducer

App.js

class App extends Component {
    static propTypes = {
        files: PropTypes.array.isRequired,
        isFetching: PropTypes.bool.isRequired,
        dispatch: PropTypes.func.isRequired
    };

    componentDidMount() {
        const {dispatch} = this.props;
        dispatch(fetchFiles);
    }

    handleChange = nextSubreddit => {
    };

    render() {
        const {files, isFetching} = this.props;
        const isEmpty = files.length === 0;
        console.log(`Files is empty ${isEmpty}`);
        return (
            <div>
                <h1>Uploadr</h1>
                {isEmpty
                    ? (isFetching ? <h2>Loading...</h2> : <h2>No files.</h2>)
                    : <div style={{opacity: isFetching ? 0.5 : 1}}>
                        <Files files={files}/>
                    </div>
                }
            </div>
        )
    }
}

const mapStateToProps = state => {
    const {uploadedFiles} = state;
    const {isFetching, items: files} = uploadedFiles
        || {isFetching: true, items: []};

    console.log(files);

    return {
        files,
        isFetching,
    }
};

動作中正在接收的數據，但是我不確定是否正在存儲它，或者從redux存儲訪問數據是否有問題。

如上面的屏幕快照所示，App組件上的files屬性仍然為零。

有任何想法嗎？

Answer 1

您的filesUploaded減速器沒有任何意義。 我不確定什至應該執行哪些filesUploaded 。 您的files減速器看起來像普通的減速器。 看來您可以刪除filesUploaded ，一切都會好起來的。

特別是， filesUploaded正在調用files(state[action], action) 。 action是一個對象。 state[SOME_OBJECT]應該是什么？ 因為它被解析為state['[object Object]'] ，所以肯定是未定義的，永遠也不會被定義。

您的files縮減器還具有一個從未使用過的items參數。 減速器應僅具有兩個參數：狀態和動作。 刪除items參數。

您的mapStateToProps正在尋找state.uploadedFiles ，但您的filesUploaded器稱為filesUploaded 。 它應該是state.filesUploaded （或者如果您用files reducer替換它，則只是state.files ）。

mapStateToProps不需要|| {isFetching: true, items: []} || {isFetching: true, items: []}因為files || {isFetching: true, items: []}具有初始狀態。

Answer 2

刪除您的filesUploaded 不用了 相反，只需使用files縮減器即可：

const rootReducer = combineReducers({
    files,
}); 

請注意，您感興趣的狀態片稱為files 。 將您的mapStateToProps函數更改為此：

const mapStateToProps = state => {
    const {isFetching, items: files} = state.files

    console.log(files);

    return {
        files,
        isFetching,
    }
};

您可以在這里看到，我們獲取了files的狀態切片並將其傳遞到您的組件中。