减速机错误。初始状态。我如何初始化状态并使用 action.type

时间:2020-12-29 06:48:05

标签: reactjs reducers use-reducer

我正在尝试设置登录用户。使用减速机。 错误是:

意外标记&&语法错误

在线切换错误(action.type) 或括号中的错误没有正确关闭我不知道
要么使用 : 要么 = 在 reducer initialize 和 initialState 中

StackOverflow :看起来你的帖子主要是代码;请添加更多详细信息。

我:我有足够的细节分享给我?我不知道比上面更多的

 import React from 'react';
    import {View, StyleSheet, Text} from 'react-native';
    import {NavigationContainer} from '@react-navigation/native';
    import {createStackNavigator} from '@react-navigation/stack';
    import { AuthStackNavigator } from './navigators/AuthStackNavigator';
    import { AuthContext } from './context/AuthContext';
    import  axios  from "axios";
    import { BASE_URL } from './config';
    import { sleep } from './utils/sleep';
    import { createAction } from './utils/createAction';
    const RootStack = createStackNavigator();
    
    export default function ()
    {
      
      const [ state, dispatch ] = React.useReducer(
        reducer : ( state: { user: * }, action ) =>
        {
          switch ( action.type )
          {
            case 'SET_USER':
              return {
                ...state,
                user: { ...action.payload },
              };
            default:
              return state;
          }
        },
        initialState : {
          user: undefined,
        }
      );
    
      const auth = React.useMemo( () => ( {
    
        login: async (email,password) =>
        {
              
    const options = {
      method: 'post',
      url: `${BASE_URL}/auth/local`,
      data: {
        identifier: email,
        email,
        password,
      },
      transformResponse: [
        (data) => {
          // transform the response
          return data;
        },
      ],
    };
    await sleep(2000);
    
    // send the request
    const {data}= axios( options );
    
          const user = {
            email: data.user.email,
            token: data.jwt,
          };
       dispatch(createAction(type:'SET_USER',user))
        },
    
    
        logout: () =>
        {
          console.log( 'logout' );
        },
    
    
        register:async (email,password) =>
        {
    const options = {
      method: 'post',
      url: `${BASE_URL}/auth/local/register`,
      data: {
        user: email,
        email,
        password,
      },
      transformResponse: [
        (data) => {
          // transform the response
    
          return data;
        },
      ],
    };
    await sleep(2000);
    
    // send the request
        
    
    
          // console.log( 'register' );
          // await axios.post(url:`${BASE_URL}/auth/local/register`, data:{
          //   username: email,
          //   email,
          //   password,
          // } );
        },
      } ),
      );
    
    
    console.log(state.user)
    
      return (
        <AuthContext.Provider value={auth}>
          <NavigationContainer>
            <RootStack.Navigator screenOptions={ { headerShown: false } }>
              <RootStack.Screen name={ 'AuthStack' } component={ AuthStackNavigator } />
            </RootStack.Navigator>
          </NavigationContainer>
        </AuthContext.Provider>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      },
    });

1 个答案:

答案 0 :(得分:2)

如果我理解您的错误并正确发出问题,它似乎与您尝试定义 useReducer 钩子参数的方式有关。您似乎正在尝试定义对象键,但您并未定义对象。 useReducer 钩子函数最多只消耗 3 个参数。

useReducer

const [state, dispatch] = useReducer(reducer, initialArg, init);

通常你只需要前两个,即你的减速器函数和初始减速器状态值。您可以在文档中进一步阅读关于延迟初始化的第三个参数。

const [state, dispatch] = React.useReducer(
  (state, action ) => { // <-- reducer function
    switch (action.type) {
      case 'SET_USER':
        return {
          ...state,
          user: { ...action.payload },
        };
      default:
        return state;
    }
  },
  { user: undefined }, // <-- initial state object value
);