Im new to react Native and Javascript programming in general and Im trying to create a simple 'To Do' app with in React Native and redux.

Im attempting to add a 'To Do' to the the array in my reducer as seen below.

import * as types from '../actions/actionTypes'

const initialState = {
    data: []
};

export default function toDo(state = initialState, action) {

    let list
    console.log(action + " action")
    switch (action.type) {
        case types.ADD:
        list = state.data.concat([action.toDoData])
            return {
                ...state,
                data: list || []
            }
        default:
             return state;
    }
}

The result shows AddToDo Results you can see 'First Thing' and 'Second Thing' are my two added results and they concat onto the same row.

My first thought was that there was something wrong with my dumb or presentational ListView which takes it data as below.

<MyList data={this.props.data}/>

So i tried this...

<MyList data={['firstThing', 'secondThing', 'thirdThing']}/>

and it works!!! This is the reason I'm thinking the error is in the reducer.

Please let me know what other code would be useful. Any insights would be MUCH appreciated.

This is the action.

import * as types from './actionTypes.js';

export function addToList(toDoData) {
    return {
        type: types.ADD,
        toDoData: toDoData
    };
}

Im new to react Native and Javascript programming in general and Im trying to create a simple 'To Do' app with in React Native and redux.

Im attempting to add a 'To Do' to the the array in my reducer as seen below.

import * as types from '../actions/actionTypes'

const initialState = {
    data: []
};

export default function toDo(state = initialState, action) {

    let list
    console.log(action + " action")
    switch (action.type) {
        case types.ADD:
        list = state.data.concat([action.toDoData])
            return {
                ...state,
                data: list || []
            }
        default:
             return state;
    }
}

The result shows AddToDo Results you can see 'First Thing' and 'Second Thing' are my two added results and they concat onto the same row.

My first thought was that there was something wrong with my dumb or presentational ListView which takes it data as below.

<MyList data={this.props.data}/>

So i tried this...

<MyList data={['firstThing', 'secondThing', 'thirdThing']}/>

and it works!!! This is the reason I'm thinking the error is in the reducer.

Please let me know what other code would be useful. Any insights would be MUCH appreciated.

This is the action.

import * as types from './actionTypes.js';

export function addToList(toDoData) {
    return {
        type: types.ADD,
        toDoData: toDoData
    };
}

• javascript
• react-native
• redux
• react-native-listview

• Just FYI you should always use semicolons. There can be some pretty ugly bugs. – castletheperson Commented Dec 18, 2016 at 4:16
• Your code looks right, just fix console.log and add more of them to find the problem. They should look like this: console.log('action', action); (ma instead of plus sign) – Bruno Lemos Commented Dec 18, 2016 at 18:00
• Not really related to your answer, but I'd use Immutable in your reducers. You don't have to of course, but I've e across some nasty bugs regarding object references without it. Immutable-types' methods would also greatly help in manipulating your data structures! – stinodes Commented Dec 19, 2016 at 9:12

4 Answers 4

Here's some insights on how you actually 'push' data into an array

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

//fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];

Or you can just

export default function toDo(state = initialState, action) {
  switch (action.type) {
    case types.ADD:
      return {
        data: [...state.data, action.toDoData]
      }
    default:
      return state;
  }
}

You want the array spread operator, i.e.

export default function toDo(state = initialState, action) {
  switch (action.type) {
    case types.ADD:
      return {
        data: [...state.data, action.toDoData]
      }
    default:
      return state;
  }
}

is your action.toDoData an array? If yes, then it should be

state.data.concat(action.toDoData)

I think that somehow, into your first loop you added string into state.data... Try something like this: list = state.data.concat(action.toDoData)
Or with ES6 spread:
list = [...state.data, action.toDodata]