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
}
}
组合减速器:
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
。
这是为什么?
解决方案
推荐阅读
- java - 对于某些文件,加载文件图标有时很慢
- android - 如何在没有 READ_CONTACTS 权限的情况下获取 Android 联系人详细信息
- node.js - req.user 认证后返回 undefined
- json - 访问 JSON 中的自定义密钥
- java - 如何获取在其中运行的 ECS 实例的 AWS IAM 凭证 - 使用 Java?
- javascript - 浏览器自动调整视频大小时如何返回视频大小
- rstudio - 您如何为是/否变量制作并排箱线图?
- apache - Apache日志分析:我需要报告重定向链中访问的初始URI
- vue.js - Vue app only renders API data correctly in local dev, not in production build (using vuex, axios, and parcel)
- php - 复制excel列并插入新数组