Home > Software engineering >  react native Error: Actions must be plain objects. Instead, the actual type was: 'string'.
react native Error: Actions must be plain objects. Instead, the actual type was: 'string'.

Time:06-09

am using React redux in react native but facing this error. i have followed many solutions but no one worked for me, hers is more detail about my actions and reduces and store


action.js 
  export const AddNow =()=>{
      return "ADD_NUM"
  }

  export const DelNow =()=>{
    return "DEL_NUM"
}

in reducer folder -> MyBook.js

const initialState = 30;
const MyBook = (state = initialState, action) => {
  switch (action.type) {
    case "ADD_NUM":
      return initialState  1;
    
    case "DEL_NUM":
      return initialState -1;
  } 
  return state;
};

export default MyBook

in redcures folder index.js 

import MyBook from "./MyBook";
import {combineReducers} from 'redux';

const rootreducers=combineReducers({ cartIMyBooktems})

export default rootreducers;

in store ->index.js
import {createStore,applyMiddleware} from 'redux';
import thunk from 'redux-thunk'; 
import rootreducers from '../reducers/index';



export default store = createStore(rootreducers, applyMiddleware(thunk));

in my app.js

import { AddNow , DelNow} from "../../actions";
import {useDispatch} from 'react-redux'
 
const dispatch = useDispatch();
  <CustomBTN 
        onPress={()=>{dispatch(AddNow) }}
        
        />

i created this and followed one video tutorial but its not working for me but working for him. can anyone please help me? am beginner

CodePudding user response:

The error says it all.

Your dispatch action is dispatching a string

  export const AddNow =()=>{
      return "ADD_NUM" //this action dispatches a string (returns a string)
  }

this is causing "actual type was string"

It tells you, it is expecting a plain object. A plain object with a type property is also expected in your reducers

///
switch (action.type)
///

It is expecting a plain object with type property.

update your action.js to

action.js

  export const AddNow =()=>{
      return {
       type: "ADD_NUM"
    }

  }

  export const DelNow =()=> {
    return {
     type: "DEL_NUM"
    } 
  }

now both your actions are returning plain objects, with a type property, as expected by redux dispatch and your reducers

also, since AddNow and DelNow are functions, they should be camelCase.

addNow, delNow

With regards to your book state always being 31.

in your reducers, you are always using the initial value as the modified value. The reducers recieve the current state as as the first parameter state which is defualted to initialState

update your reducers to use the state parameter

const initialState = 30;
const MyBook = (state = initialState, action) => {
  switch (action.type) {
    case "ADD_NUM":
      return state   1; //update initialState to state 
    
    case "DEL_NUM":
      return state -1; //update initialState to state 
  } 
  return state;
};

export default MyBook
  • Related