还原 |如何正确连接到 redux 商店

Posted 2023-03-30

【中文标题】还原 |如何正确连接到 redux 商店

【英文标题】：Redux | How do I properly connect to the redux store

【发布时间】：2019-12-02 18:08:18

【问题描述】：

我让我的 redux 商店工作，但前提是我将商店导入动作创建者文件并从动作创建者调用 store.dispatch()。显然调用store.dispatch() 不是一个好习惯，如果我将函数正确连接到商店，那么我可以调用dispatch() 而不是store.dispatch()。也就是说，当我尝试只使用dispatch() 时，我得到了错误：“找不到变量：分派”。

我最好的猜测是我的问题是我没有在这段代码的底部正确使用 Redux 的 connect() 函数：

import React, useState from 'react'
import  connect  from 'react-redux'
import  StyleSheet, View, Text, TextInput, Image, TouchableOpacity  from 'react-native'; 
import  signup  from '../../actions/authAction'

const ApprovedScreen = () => 
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')  

  return (
    <View>
        <TextInput 
            style=styles.textInput
            value=email
            onChangeText=text=>setEmail(text)
        />
        <TextInput 
            value=password
            onChangeText=text=>setPassword(text)
        />
        <TouchableOpacity onPress=()=>signup(email, password)>
          <Text>Create An Account</Text>
      </TouchableOpacity>
    </View>
  )


export default connect(null,  signup )(ApprovedScreen)

这是注册功能代码：

import axios from 'axios'
import  LOG_IN  from './types'

export function signup (email, password) 
    console.log('singup function ran')
        axios
        .post('https://MYAPI.com/signup', email, password)
        .then(response => dispatch(
            type: LOG_IN,
            payload: response.data.token
        ))
        .catch(error => 
            console.log(error)
        )
 

【参考方案1】：

由于您使用的是 redux-thunk，因此该操作需要返回另一个函数，该函数以 dispatch 作为参数：

export function signup( email,  password) 
  return function(dispatch) 
    return axios
      .post('https://MYAPI.com/signup', 
        email,
        password
      )
      .then(response => dispatch(
        type: LOG_IN,
        payload: response.data.token
      ))
      .catch(error => 
        console.log(error)
      )
  

您还需要将signup 函数作为道具传递给您的组件：

const ApprovedScreen = (signup) => 

【讨论】：

你应该use the "object shorthand" form of mapDispatch而不是函数形式：const mapDispatch = signup。

@markerikson 今天刚刚读到它，但我想知道如果调度的动作需要参数，它会起作用吗？

@Clarity 我尝试了速记和速记，但都没有奏效。我仍然收到错误“找不到变量：调度”。此外，将singup 传递给 ApprovedScreen 给了我一个似乎无关的新错误：“未定义不是对象” - 它似乎来自我的 redux 记录器。

@mpc75 您是否使用任何 redux-middleware（如 redux-thunk）来执行异步操作？

@Clarity 是的！成功了，非常感谢！仅供参考，速记和速记 mapdispatch 功能都有效:)