为什么我的组件没有收到更新的Redux状态?

时间:2019-10-12 17:33:50

标签: reactjs redux

为什么我的状态在连接的组件中没有更新?

我的减速器:

import assetTypes from '../constants/assets'

export const initialState = {
    isUploading: false,
}

export default function assetsReducer(
    state = initialState,
    action,
) {
    switch (action.type) {
        case assetTypes.ASSETS_SET_UPLOADING: {
            console.log('assetTypes.ASSETS_SET_UPLOADING', action.payload)
            return {
                ...state,
                isUploading: action.payload,
            }
        }

        default:
            return state
    }
}

combineReducers:

import { combineReducers } from 'redux'

import user, { initialState as userInitialState } from './user'
import assets, { initialState as assetsInitialState } from './assets'

export const initialStates = {
    assets: { ...assetsInitialState },
    user: { ...userInitialState },
}

const appReducer = combineReducers({
    assets,
    user,
})

const rootReducer = (state, action) => appReducer(state, action)

export default rootReducer

我的mapStateToProps

export const mapStateToProps = state => ({
    isUploading: state.assets.isUploading,
})

…和我的动作:

const setUploading = payload => ({
    type: assetTypes.ASSETS_SET_UPLOADING,
    payload,
})

我的传奇:

// import DOMPurify from 'dompurify'
import { get } from 'lodash'
import {
    all,
    call,
    put,
    takeLatest,
} from 'redux-saga/effects'

// Actions
import assetActions from 'store/actions/assets'
import fetch from 'utils/fetch'
import assetsTypes from '../constants/assets'

// Selectors
export const uploadURL = state => state.assets.uploadURL

/**
 * Upload fingerprinted assets
 *
 * @function uploadAssets
 * @param {object} action Params pulled in from action
 */
function* uploadAssets(action) {
    const { accountID, data, tags } = action.payload

    try {
        const url = yield call(
            fetch,
            `/account/${accountID}/asset/upload`,
            { method: 'POST' },
        )

        yield put(assetActions.setUploading(true))

        const response = yield call(fetch, url.data.body.url, {
            body: JSON.stringify({
                ...data,
                tags,
            }),
            method: 'PUT',
        })

        yield put(assetActions.setUploading(false))
        yield put(
            assetActions.setCollection({
                collection: get(response, 'data.body'),
            })
        )
    } catch (error) {
        yield put(assetActions.setUploading(false))
    }
}

/**
 * assetsSagas
 *
 * Listens for action dispatch associated with each
 * saga within the 'all' effect
 *
 * @generator
 * @function userSagas
 */
export default function* userSagas() {
    yield all([
        takeLatest(assetsTypes.ASSETS_UPLOAD_ASSETS, uploadAssets),
    ])
}

最后,该组件(删除了所有不相关的内容):

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

// Actions
import assetsActions from 'store/actions/assets'

export class ModalAssetUpload extends React.PureComponent {
    constructor() {
        super()

        this.state = {
            parsedData: null,
            tagsSelected: [],
        }
    }

    componentDidUpdate(prevProps) {
        const { isUploading } = this.props
        console.log('isUploading', isUploading)
    }

    handleUpload =  => {
        const { uploadAssets } = this.props
        const { parsedData, tagsSelected } = this.state

        uploadAssets({
            data: parsedData,
            tags: tagsSelected,
        })
    }

    render() {
        ...
    }
}

ModalAssetUpload.propTypes = {
    isUploading: PropTypes.bool,
    uploadAssets: PropTypes.func.isRequired,
}

ModalAssetUpload.defaultProps = {
    isUploading: false,
}

export const mapStateToProps = state => ({
    isUploading: state.assets.isUploading,
})

export const mapDispatchToProps = dispatch => ({
    uploadAssets:
        payload => dispatch(assetsActions.uploadAssets(payload)),
})

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(ModalAssetUpload)

如果我在组件的isUploading方法中登录componentDidUpdate(),则在组件加载时只会得到一个isUploading false。如果我将console.log('assetTypes.ASSETS_SET_UPLOADING', action.payload)添加到reducer并触发setUploading操作,则该日志将反映正确的结果,但组件将永不记录isUploading true

那是为什么?

0 个答案:

没有答案