Question

我正在尝试访问从Web API接收的数据以在组件中执行操作。我设置了registerUser操作，该操作将新的用户数据发布到API，然后将其发送到DB。 API以JSON格式发送回状态。我想根据状态键的值传递错误/通知。

编辑：我在redux状态下添加了键状态，在REGISTER_USER类型的操作中，我正在根据从后端发送的状态为其分配值。

但是，我无法通过this.props.state/this.props.user来访问此属性状态-控制台将其记录为“未定义”

authActions.js

const authState = {
 users: [],
 status: ''
}

export const registerUser = user => dispatch => {
 axios.post('https://damianlibrary.herokuapp.com/users/register', user)
  .then(res => dispatch({
   type: REGISTER_USER,
   payload: res.data,
   status: res.data.status
  }))
}

authReducer.js

import { LOGIN_USER, REGISTER_USER } from '../actions/types';

const authState = {
 users: []
}

export default function(state = authState, action) {
 switch(action.type) {
  case LOGIN_USER:
   return {
    ...state
   };
  case REGISTER_USER:
   return {
    ...state,
    users: [action.payload, ...state.users]
   };
  default:
   return state;
 }
}

RegistrationForm.js组件

import React, { Component } from 'react';

import { connect } from 'react-redux';
import { registerUser } from '../../actions/authActions';

import './RegisterForm.css';

class RegisterForm extends Component {

 state = {
  user_name: '',
  password: '',
 }

 onChangeHandler = (e) => {
  this.setState({ [e.target.name]: e.target.value })
 };

 onSubmitHandler = (e) => {

 const { user_name, password } = this.state

      const newUser = {
      user_name: user_name,
      password: password
    }
    this.props.registerUser(newUser)

    this.setState({
      user_name: '',
      password: ''
    })
  e.preventDefault();
}

render() {
const { user_name, password } = this.state;

return (
  <div className='formContainer'>
    <div className='form'>
      <form className='bookForm' onSubmit={this.onSubmitHandler.bind(this)}>
        <div className='inputs'>
          <input 
          type='text' 
          name='user_name'  
          placeholder='Username'
          onChange={this.onChangeHandler}
          value={user_name}/>
          <input 
          type='password' 
          name='password'  
          placeholder='Password'
          onChange={this.onChangeHandler}
          value={password}/>
        </div>
        <div className='buttonSpace'>
          <button>Register</button>
        </div>
      </form>
    </div>
  </div>
  )
 }
}

const mapStateToProps = (state) => ({
 user: state.user
});

export default connect(mapStateToProps, { registerUser })(RegisterForm);

我是否必须在App容器（位于中）中获取该值，然后获取状态：state.status（redux状态）并将其通过props传递给RegisterForm组件？

store.js

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState = {};

const middleware = [thunk];

const store = createStore(rootReducer, initialState, compose(
  applyMiddleware(...middleware)
));

export default store;

rootReducer.js

import { combineReducers } from 'redux';
import bookReducer from './bookReducer';
import authReducer from './authReducer';

export default combineReducers({
 book: bookReducer,
 auth: authReducer
});

Answer 1

解决了我的问题。我在 rootReducer.js 文件中调用了auth: authReducer，此后，我尝试通过调用user: state.user而不是user: state.auth来获取减速器返回的内容。

我现在可以毫无问题地达到还原状态。

如何通过异步操作访问某些res.data？

1 个答案: