2

https://snack.expo.io/@haosmark/kw-companion I'm having a hard time figuring this out. To start, I'm just trying to take a list of players and push it over to my starting screen.

A bit of explanation of what I've done so far:

  • mockData.json is a file with the content that I'm trying to display
  • App.js creates a few navigators and sets the starting point to be PlayerNavigator
  • api.js is where I'm thinking of processing json content
  • redux/reducers/player_reducer.js is how I try to get the player list (reducers are pretty difficult for me to understand right now, so I'm not sure what goes into these files yet.)
  • screens/list.js is where I'm trying to connect redux to RN and read the player list.

At present, the code doesn't compile. My emulator screams that "players" returned undefined during initialization. Snack editor is screaming "Device: (78:20) Unable to resolve module 'module://mockData.js'" but I have no idea where it's even finding mockData.js since it isn't one of the files within the project.

Edit: I was able to figure out the .json problem for the snack, now the problem is the same as on the local emulator:

Device: (281:119) Reducer "players" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined. Evaluating module://redux/store/index.js

haosmark
  • 1,097
  • 2
  • 13
  • 27
  • `import mockData from './mockData'` means `mockData.js`. not providing an extension defaults to `js`. you need to put `.json` if you want to load json... you would also need to appropriate loader to do so and I don't believe react native comes with one by default. either change your json to js or make an http call to retrieve your data – azium Aug 20 '18 at 03:28
  • Possible duplicate https://stackoverflow.com/questions/29452822/how-to-fetch-data-from-local-json-file-on-react-native – tuan.tran Aug 20 '18 at 03:52
  • It's not a duplicate. The problem with getting json data is only the first stage. Getting the data onto the screen is the core of my question. – haosmark Aug 20 '18 at 13:19

1 Answers1

0

Just changing import mockData from './mockData' to import mockData from './mockData.json' should do the trick. I can confirm that it works on RN 0.55.2.

Regarding your new error: when you create the store it needs to be initialized with some initial state. It can be passed as the second argument to createStore, but the most straightforward way is to have a default value for the state argument in all of your reducers. For example, if your state.players substate is a list of players, your default argument value can be []. Then, to add or remove players inside your reducers you can use (for example) state.push() and state.pop() and you don't have to care about the prototype of your state object.

dols3m
  • 1,676
  • 2
  • 16
  • 25
  • Good idea, but didn't work. It's now trying to access mockData.json.js. https://i.imgur.com/dX5WAd5.png. – haosmark Aug 20 '18 at 13:17
  • @haosmark this is bizarre. Did you rename your json file to .json.js? Don't do that because it will assume that it's a JS file and will try to parse it accordingly. In any case, if it is trying to access .json.js my guess is that something is messed up in your babel config. I suggest trying to create a new app with CRNA (https://github.com/react-community/create-react-native-app) and simply moving your code to that directory. This is what I use for my Expo projects, it provides a hassle-free setup out of the box. – dols3m Aug 21 '18 at 06:37
  • This isn't the core of my question, but I solved the json issue by changing the extension from 'json' to 'js' and exporting the content as a variable. I'm still not sure how to get the list of players out to the screen. – haosmark Aug 22 '18 at 01:59