Redux-form 通过 POST 请求传递数据。

Question

我必须更新包含 5 个字段名称、生物地址、图像和性别的用户个人资料。我在 Django 上创建了使用 auth Knox 令牌进行身份验证的完美工作 API。

我在登录期间存储了身份验证令牌。其中reducer长这样：

   case 'LOGIN_SUCCESSFUL':
        case 'REGISTRATION_SUCCESSFUL':
            localStorage.setItem("token", action.data.token);
            return {...state, ...action.data, isAuthenticated: true, isLoading: false, errors: null};

以后我可以像这样访问令牌：

let headers = {"Content-Type": "application/json"};
    let {token} = getState().auth;

    if (token) {
      headers["Authorization"] = `Token ${token}`;
    }

我的问题是： 如何制作一个将此令牌作为标头并发出发布请求的表单？什么是减速器，什么是动作？

class Profile extends Component {

  constructor(props) {
    super(props)
    this.handleSubmit = this.handleSubmit.bind(this)
  }


  handleSubmit(e) {
    e.preventDefault()

    console.log(this.props.Name)
  }
  change = e => {
    console.log(e.target.name)
    values.push(e.target.value)


    [e.target.name]: e.target.value

  }
  render() {


    return (
      <form onSubmit={this.handleSubmit}>
        <div>
          <label htmlFor="Name">Name</label>
          <input name="Name" onChange={e => this.change(e)} component="input" type="text" />
        </div>

        <div>
          <label htmlFor="Bio">Bio</label>
          <input name="Bio" component="input" onChange={e => this.change(e)} type="text" />
        </div>

        <div>
          <label htmlFor="Address">Address</label>
          <input name="Address" component="input" onChange={e => this.change(e)} type="text" />
        </div>

        <button type="submit">Submit</button>
      </form>
    )
  }


}



const mapStateToProps = (state) => {
  return {
    profile: state.user,

  }
}

const mapDiapatchToProps = (dispatch) => {
  return {
    updateprofile: (values) => dispatch(updateprofile(values))
  }
}

export default connect(mapStateToProps, mapDiapatchToProps)(Profile);

我试过这个，但我很困惑如何将值发送到行动？ 还是我必须使用 redux-form？

我想在这个 API 上发出 put 请求：api/update/profile/${id}

请帮帮我。

Answer 1

您需要使用外部库进行 HTTP 调用，例如 Axios。

在您的操作文件中，您需要创建函数updateProfile。在这个函数中，你需要使用 Axios 进行 HTTP 调用，或者任何你想要的。使用 axios，您的功能将是这样的：

function updateProfile() {
  return (dispatch) => {
    axios({
      method:'get',
      url:'[YOUR API ADDRESS]',
      headers: {Authorization: '[YOUR TOKEN]'},
      data: {
        name: 'bruce',
        lastName: 'bane'
      }
    }).then(function(response) {
      dispatch({
        type: UPDATE_PROFILE,
        payload: response
      });
    });

    return null
  }
}

在你的 Profile 组件中，你需要将 mapDispatchToProps 函数更改为从动作文件中调用 updateProfile 函数，如下所示：

const mapDispatchToProps = (dispatch) => {
  return {
    updateprofile: (values) => dispatch(profileActions.updateprofile(values))
  }
}

注意：我没有测试过这段代码，但它会接近这个。希望对您有所帮助。