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

Posted 2023-02-22

【中文标题】Redux-form 通过 POST 请求传递数据。

【英文标题】：Redux-form to pass data by a POST request.

【发布时间】：2018-12-31 13:41:03

【问题描述】：

我必须更新包含 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

请帮帮我。

【参考方案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))
  

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

【讨论】：

我将如何访问实际中的令牌？什么是 profileAction？

好吧，我不知道您的登录系统是如何工作的。但是您正在某处生成令牌以验证用户，对吗？您需要将其存储在系统中的某种会话变量中，然后您可以从任何地方访问它。关于profileAction，应该是redux的action creator，见这里redux.js.org/basics/actions