Javascript React redux reducer从状态获取数据？

尝试使用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)))
};

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

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,
    }
};

该操作从JSON获取数据

reducer.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)))
};

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

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,
    }
};

App.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)))
};

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

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,
    }
};

类应用程序扩展组件{
静态类型={
文件：PropTypes.array.isRequired，
isFetching:PropTypes.bool.isRequired，
调度：需要PropTypes.func.isRequired
};
componentDidMount（）{
const{dispatch}=this.props；
发送（获取文件）；
}
handleChange=nextSubreddit=>{
};
render（）{
const{files，isFetching}=this.props；
const isEmpty=files.length==0；
log（`Files is empty${isEmpty}`）；
返回(
上传器
{我是空的
？（正在提取？正在加载…：无文件。）
: 
}
)
}
}
常量mapStateToProps=状态=>{
const{uploadedFiles}=state；
const{isFetching，items:files}=uploadedFiles
||{isFetching:true，项：[]}；
console.log（文件）；
返回{
文件夹，
很吸引人，
}
};

在操作中接收到的数据，但我不确定它是否被存储，或者问题是否是从redux存储访问它

如上面的屏幕截图所示，应用程序组件的files属性仍然为零

---

有什么想法吗？

你上传的

文件没有任何意义。我甚至不知道上传的文件应该做什么。您的
文件
减速机看起来像普通减速机。看起来你可以删除上传的文件，一切都会好起来的

特别是，
filesuppload
正在调用
文件（state[action]，action）
<代码>操作

是一个对象。

状态[某个对象]

应该是什么？因为它被解析为

状态['[object]]

，这肯定是未定义的，而且永远不会被定义

您的

文件

reducer还有一个从未使用过的

items

参数。减速器应该只有两个参数：状态和动作。删除items参数

您的

mapStateToProps

正在查找

state.uploadedFiles

，但您的减速机名为

filesUploaded

。它应该是

state.filesUploaded

（或者如果用

files

reducer替换它，只需

state.files

）

---

mapstatetops

将不需要

|{isFetching:true，items:[]}

，因为您的

文件

reducer上有一个初始状态。

您的

文件上传

reducer没有任何意义。我甚至不知道上传的文件应该做什么。您的

文件

减速机看起来像普通减速机。看起来你可以删除上传的文件，一切都会好起来的

特别是，

filesuppload

正在调用

文件（state[action]，action）

<代码>操作是一个对象。

状态[某个对象]

应该是什么？因为它被解析为

状态['[object]]

，这肯定是未定义的，而且永远不会被定义

您的

文件

reducer还有一个从未使用过的

items

参数。减速器应该只有两个参数：状态和动作。删除items参数

您的

mapStateToProps

正在查找

state.uploadedFiles

，但您的减速机名为

filesUploaded

。它应该是

state.filesUploaded

（或者如果用

files

reducer替换它，只需

state.files

）

---

mapstatetrops

将不需要

|{isFetching:true，items:[]}

，因为您的

文件具有初始状态。
删除您上传的
文件
缩减器。你不需要它。相反，只需使用
文件
减速机：

const rootReducer = combineReducers({
    files,
}); 

请注意，您感兴趣的状态片段将被称为
文件
。将
MapStateTops
功能更改为：

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

    console.log(files);

    return {
        files,
        isFetching,
    }
};

您可以在这里看到，我们获取状态的
文件
片段并将其传递到您的组件。
删除您上传的
文件
reducer。你不需要它。相反，只需使用
文件
减速机：

const rootReducer = combineReducers({
    files,
}); 

请注意，您感兴趣的状态片段将被称为
文件
。将
MapStateTops
功能更改为：

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

    console.log(files);

    return {
        files,
        isFetching,
    }
};

您可以在这里看到，我们抓取状态的
文件
片段并将其传递到您的组件。
如果您查看
下一个状态
是否有您请求的信息？如果您查看
下一个状态
是否有您请求的信息？谢谢，我正在使用此作为示例-谢谢，我用这个作为例子-You da real MVPGlad it Help:）You da real MVPGlad it Help:）