Почему мое состояние не обновляется в подключенном компоненте?
Мой редуктор:
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
}
}
combReducers:
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)
к редуктору и активирую действие setUploading
, этот журнал отражает правильный результат, но компонент никогда не регистрирует isUploading true
.
Почему это так?