代码之家 › 专栏 › 技术社区 › tomaytotomato

React redux reducer从状态获取数据?

redux reactjs javascript

tomaytotomato · 技术社区 · 8 年前

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

减速机.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

应用程序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,
    }
};

如上图所示,App组件上的files属性仍然为零。

有什么想法吗?

2 回复 | 直到 8 年前

tpdietz 8 年前

删除您的 filesUploaded 减速器。你不需要它。相反,只要使用 files 减速机:

const rootReducer = combineReducers({
    files,
});

请注意,您感兴趣的部分将被称为 文件夹 . 改变你的 mapStateToProps

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

    console.log(files);

    return {
        files,
        isFetching,
    }
};

你看这里,我们抓住 文件夹 切片状态并将其传递到组件中。

Charles Stover 8 年前

filesUploaded 减速机没有任何意义。我不知道是什么 上载的文件 files 减速器看起来像普通的减速器。好像你可以删除一切都会好起来的。

特别地, 正在呼叫 files(state[action], action) . action 是一个物体。是什么 state[SOME_OBJECT] state['[object Object]'] 它肯定是未定义的,永远不会被定义。

你的减速器也有 items 从未使用过的参数。减速器应该只有两个参数:状态和动作。删除items参数。

mapStateToProps 正在寻找 state.uploadedFiles ,但你的减速机叫 上载的文件 state.filesUploaded (或者用 文件夹 state.files ).

地图状态 || {isFetching: true, items: []} 因为你有一个初始状态 文件夹