Question

嗨，我是React和Redux的新人。

我在尝试从数据库中获取用户对象时遇到了reducer的问题。但似乎没有将州恢复到正确的位置？

在我的前端 editProfile.js ：

\\

行动 actions_user.js ：

import { a_fetchUser } from '../../../actions/resident/actions_user';

class EditProfile extends Component {
    componentDidMount() {
       this.props.fetchProfile({ iduser: this.props.auth.user.iduser });
       console.log(this.props.store.get('isProcessing')); // returns false
       console.log(this.props.store.get('retrievedUser')); // returns empty object {} when it's supposed to return data
    }

    // code simplified...

    const mapStateToProps = state => ({
       store: state.r_fetch_user,
       auth: state.authReducer
    });

    const mapDispatchToProps = (dispatch, store) => ({
       fetchProfile: (user) => {
           dispatch(a_fetchUser(user));
       }
    });

    export const EditProfileContainer = connect(
      mapStateToProps,
      mapDispatchToProps,
    )(EditProfile);
}

Reducer userReducer.js ：

import axios from 'axios';

const startFetchUser = () => ({
    type: 'START_FETCH_USER',
});

const endFetchUser = response => ({
    type: 'END_FETCH_USER',
    response,
});

export const a_fetchUser = (user) => (dispatch) => {
    dispatch(startFetchUser());
    return axios.post('/rdb/getUser/', user)
        .then((res) => {
        console.log(res);
        dispatch(endFetchUser(res));
    })
    .catch((err) => {
        console.log(err);
        dispatch(endFetchUser({ status: 'error' }));
    });
};

我的目标是从商店中检索对象retrieveUser。我在前端尝试了console.log（this.props.store），它确实返回了初始状态的地图fetchUserState。

我也尝试过state.set（没有返回）并且它成功了所以我得出结论说return语句有问题吗？

其他细节：使用MERN堆栈。

Answer 1

这看起来不对：

 const mapDispatchToProps = (dispatch, store) => ({
       fetchProfile: (user) => {
           dispatch(a_fetchUser(user));
       }
    });

您需要做的是使用bindActionCreators，您可以看到示例here和here：

function mapDispatchToProps(dispatch) {
  return bindActionCreators(actionCreators, dispatch)
}

或者您也可以将语法更改为：

 const mapDispatchToProps = (dispatch) => ({
           fetchProfile: a_fetchUser(user);
 });

Answer 2

我不确定你的state.set（）方法究竟是什么（在reducer中）但是如果它改变了状态，那么你的reducer将不会保持PURE函数，因为它改变了原始状态obj。所以请更新下面的reducer方法，开始返回不应该改变现有状态obj的新状态obj：

export const r_fetch_user = (state = fetchUserState, action) => {
    switch (action.type) {
        case 'START_FETCH_USER':
            console.log('start'); // printed
            return state.set('isProcessing', true);
        case 'END_FETCH_USER':
            if (action.response.data.status === 'success') {
                console.log(action.response.data.data[0]); // data retrieved from database successfully
                return state.set('isProcessing', false).set('retrievedUser', action.response.data.data[0]);
            } else {
                return state.set('isProcessing', false).set('retrievedUser', {});
            }
        default:
            return state;
    }
};

ReactJS x Redux：Reducer不返回状态值

2 个答案: