Redux：我的状态正在接收 '@@redux/INITi.8.g.w.a.m' Redux 状态未更新

Posted 2023-03-06

【中文标题】Redux：我的状态正在接收 \'@@redux/INITi.8.g.w.a.m\' Redux 状态未更新

【英文标题】：Redux: My state is receiving '@@redux/INITi.8.g.w.a.m' Redux state not updatingRedux：我的状态正在接收 '@@redux/INITi.8.g.w.a.m' Redux 状态未更新

【发布时间】：2020-09-11 05:07:27

【问题描述】：

我一直在调试为什么我的状态没有改变，并注意到我的减速器中记录了这一点：

 type: '@@redux/INITi.8.g.w.a.m' 

这是包含状态、动作类型、reducer、动作的商店：

/* initial state */
import axios from 'axios';

export var usersStartState = 
  accountNotVerified: null,
  isLoggedIn: false,
  error: true,
  userAvatar: 'uploads/avatar/placeholder.jpg'
;

/* action types */
export const actionTypes = 
  RESET_USER_ACCOUNT_IS_VERIFIED: 'RESET_USER_ACCOUNT_IS_VERIFIED',
  USER_ACCOUNT_IS_VERIFIED: 'USER_ACCOUNT_IS_VERIFIED',
  USER_ACCOUNT_NOT_VERIFIED: 'USER_ACCOUNT_NOT_VERIFIED',
  IS_LOGGED_IN: 'IS_LOGGED_IN',
  IS_LOGGED_OUT: 'IS_LOGGED_OUT',
  LOAD_USER_AVATAR: 'LOAD_USER_AVATAR',
  ERROR_LOADING: 'ERROR_LOADING' // LOAD_MULTER_IMAGE: "LOAD_MULTER_IMAGE"
;

/* reducer(s) */
export default function users(state = usersStartState, action) 
  console.log('In users reducer! ', action);
  switch (action.type) 
    case actionTypes.RESET_USER_ACCOUNT_IS_VERIFIED:
      return Object.assign(, state,  accountNotVerified: null );

    case actionTypes.USER_ACCOUNT_IS_VERIFIED:
      return Object.assign(, state,  accountNotVerified: false );

    case actionTypes.USER_ACCOUNT_NOT_VERIFIED:
      return Object.assign(, state,  accountNotVerified: true );

    case actionTypes.IS_LOGGED_IN:
      return Object.assign(, state,  isLoggedIn: true );

    case actionTypes.IS_LOGGED_OUT:
      return Object.assign(, state,  isLoggedIn: false );

    case actionTypes.LOAD_USER_AVATAR:
      return  ...state, userAvatar: action.data ;

    case actionTypes.ERROR_LOADING:
      return Object.assign(, state,  error: true );

    default:
      return state;
  


/* actions */
export const resetUserAcoountVerified = () => 
  return  type: actionTypes.RESET_USER_ACCOUNT_IS_VERIFIED ;
;

export const userHasBeenVerified = () => 
  return  type: actionTypes.USER_ACCOUNT_IS_VERIFIED ;
;

export const userHasNotBeenVerified = () => 
  return  type: actionTypes.USER_ACCOUNT_NOT_VERIFIED ;
;

export const logInUser = () => 
  return  type: actionTypes.IS_LOGGED_IN ;
;

export const logOutUser = () => 
  axios
    .get('/users/logout')
    .then(response => 
      if (response.status === 200) 
        console.log('You have been logged out!');
      
    )
    .catch(function(error) 
      if (error.response.status === 500) 
        console.log('An error has occured');
      
    );
  return  type: actionTypes.IS_LOGGED_OUT ;
;

export const loadAvatar = data => 
  console.log('in load avatar ', data);

  return  type: actionTypes.LOAD_USER_AVATAR, data: data ;
;

export const errorLoading = () => 
  return  type: actionTypes.ERROR_LOADING ;
;

这是我的组件：

import  useState  from 'react';

import  Card, Icon, Image, Segment, Form  from 'semantic-ui-react';

import  connect  from 'react-redux';
import  bindActionCreators  from 'redux';
import  loadAvatar  from '../../store/reducers/users/index';

import axios from 'axios';

function ImageUploader( userAvatar ) 
  var [localUserAvatar, setLocalUserAvatar] = useState(userAvatar);
  function fileUploader(e) 
    e.persist();

    var imageFormObj = new FormData();

    imageFormObj.append('imageName', 'multer-image-' + Date.now());
    imageFormObj.append('imageData', e.target.files[0]);
    loadAvatar('foo');

    axios(
      method: 'post',
      url: `/users/uploadmulter`,
      data: imageFormObj,
      config:  headers:  'Content-Type': 'multipart/form-data'  
    )
      .then(data => 
        if (data.status === 200) 
          console.log('data ', data);
          console.log('path typeof ', typeof data.data.path);
          loadAvatar('foo');

          setLocalUserAvatar('../../' + data.data.path);
        
      )
      .catch(err => 
        alert('Error while uploading image using multer');
      );
  

这里是 console.log('userAvatar in imageUploader ', userAvatar); console.log('Date.now() 第 44 行 in imageUploader ', Date.now()); console.log('localUserAvatar in imageUploader ', localUserAvatar); console.log('Date.now() 第 46 行 in imageUploader ', Date.now());

  console.log("loadAvatar('barbar') ", loadAvatar('barbar'));

  return (
    <>
      <Segment>
        <Card fluid>
          <Image src=localUserAvatar  />
          <Segment>
            <Form encType="multipart/form-data">
              <Form.Field>
                <input
                  placeholder="Name of image"
                  className="process__upload-btn"
                  type="file"
                  content="Edit your Avatar!"
                  onChange=e => fileUploader(e)
                />
              </Form.Field>
            </Form>
          </Segment>
          <Card.Content>
            <Card.Header>Charly</Card.Header>
            <Card.Meta>
              <span className="date">Joined in 2015</span>
            </Card.Meta>
            <Card.Description>Charly</Card.Description>
          </Card.Content>
          <Card.Content extra>
            <a>
              <Icon name="user" />
              22 Friends
            </a>
          </Card.Content>
        </Card>
      </Segment>
    </>
  );


function mapStateToProps(state) 
  const  users  = state;
  const  userAvatar  = users;

  return  userAvatar ;


const mapDispatchToProps = dispatch => bindActionCreators( loadAvatar , dispatch);

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ImageUploader);

从日志中您可以看到 loadAvatar 调度程序，在组件和存储中被触发...

但商店中的状态永远不会改变......

其他状态也确实会正确更改...例如，我有一个 Modal 并且可以很好地更新。

任何帮助将不胜感激 type: '@@redux/INITi.8.g.w.a.m' 以及为什么我的状态没有更新？

【参考方案1】：

Redux dispatches that action as an internal initialization step:

  // When a store is created, an "INIT" action is dispatched so that every
  // reducer returns their initial state. This effectively populates
  // the initial state tree.
  dispatch( type: ActionTypes.INIT )

这是为了让你的 reducer 看到动作，不识别动作类型，并返回它们的默认状态，从而定义初始的整体应用状态内容。