CODEWITHSUNDEEP
react-nativemobxmobx-react
Manspof
Manspof

Reputation: 357

react native mobx value is not primitive

I build react native app and I'm using mobx. into the store I have array called tools, when i try to assign values into array I get the array

Encountered an uncaught exception that was thrown by a reaction or observer component, in: 'Reaction[Reaction@1] Error: [serializr] this value is not primitive: 14

 class Task {
@persist @observable id = ''
@persist @observable title = ''
@persist @observable description = ''
@persist @observable tools = []

constructor(id,title,description,tools){
    console.log('new task')
    console.log(id,title,description,tools)
    this.id = id
    // this.title = title
    this.description = description
    this.tools = tools;

}

TasksStore - here I create new object of Task.

    import { observable, action, computed } from 'mobx'
import { persist } from 'mobx-persist'
import Task from '../Task/Task'
class TasksStore {

    @persist('list',Task) @observable tasks = []
    @observable storeHydrated = false;


    @action done(){
        this.storeHydrated = true

    }

    @action addNewTask(task){
        this.tasks.push(new Task(0,task.title,task.description,task.tools))
        console.log('tasks is',this.tasks)
    }






}


const taskStore = new TasksStore();
export default taskStore;

when I remove 

    @persist @observable tools = []

the app works fine.

Upvotes: 4

Views: 1907

Answers (2)

Ralph de Ruijter
Ralph de Ruijter

Reputation: 183

I had the same problem.The solution is to make the Task class serializable like this:

class Task {
 @serializable @observable id = ''
 @serializable @observable title = ''
 @serializable @observable description = ''
 @serializable(list(primitive()))   @observable tools = []

constructor(id,title,description,tools){
  console.log('new task')
  console.log(id,title,description,tools)
  this.id = id
  // this.title = title
  this.description = description
  this.tools = tools;  
}

And persist your now serializable Task in your store:

class Store{
  @persist('object', Task)
  @observable
  public Task= new Task()
}

Upvotes: 0

Sandy
Sandy

Reputation: 520

@persist('list') @observable tools = []

try to set type of tools. It will work

Upvotes: 4

Related Questions