【问题标题】:Redux state does not update even when reducer called with correct data即使使用正确的数据调用 reducer,Redux 状态也不会更新
【发布时间】:2021-02-06 17:27:47
【问题描述】:

由于某种原因,即使 reducer 运行并且 console.log 显示正确的数据被传递给它,redux 存储也没有更新。

相关文件:

  1. App.jsx
import {Provider} from 'react-redux';
import store from './store';
const Stack = createStackNavigator();

export default class App extends Component {
  render() {
    return (
      <Provider store={store()}>
  1. Store.js
import {createStore, applyMiddleware} from 'redux';
import rootReducer from '../reducers';
import thunk from 'redux-thunk';

const store = (initialState = {}) =>{
  return createStore(
    rootReducer,
    initialState,
    applyMiddleware(thunk)
  )
}
export default store;
  1. Register.tsx
...
<Pressable 
style={styles.button}
onPress={() => this.props.submitRegistration(this.state)}
>
...
const mapDispatchToProps = (dispatch: any) => {
  return {
    submitRegistration: (data: any) => {
      dispatch(UserActions.submitRegister(data))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Register);
  1. 用户操作
import { signUp } from '../../services/backend';
import { setUser } from '../../actions';

export function submitRegister(data: any) {
  return async (dispatch: any) => {
    const response = await signUp(data);

    const responseData = await response.json();
    if(responseData.token) {
      console.log('here', responseData);
      dispatch(setUser(responseData.user));
    }
  }; 
}
  1. 动作创建者
export const setUser = (user: any) => ({
  type: 'SET_USER',
  user
}); 
  1. 用户缩减器
import { SET_USER } from "../actions/actionTypes"

const initialState = {
  user: {}
}

const User = (state = initialState, action: any) => {
  switch(action.type) {
    case SET_USER: 
      console.log('here action', action.user);
      return { user: action.user}
    default:
      return state
  }
}
export default User;

我非常感谢任何可能的帮助。似乎我在某种程度上配置错误,因为即使我设置了初始状态:

const initialState = {
  user: {firstName: "John"}
}

它没有反映在 redux 存储中。

【问题讨论】:

    标签: javascript reactjs redux react-redux


    【解决方案1】:

    在您的动作创建器中:

    export const setUser = (user: any) => ( 返回 { 类型:'SET_USER', 用户 });

    【讨论】:

    • 不幸的是,这不起作用:(我已将动作创建者修改为:export function setUser(user:any) { return { type: 'SET_USER', user } }
    • 还想澄清一下reducer中的console(这里的action)确实运行了,所以reducer跑了。但是状态没有更新
    猜你喜欢
    • 2021-04-09
    • 2021-01-12
    • 1970-01-01
    • 2020-01-30
    • 1970-01-01
    • 1970-01-01
    • 2019-07-05
    • 2016-07-02
    • 1970-01-01
    相关资源
    最近更新 更多