質問編集履歴

別エラーが発生したため加筆しました(_ _)

2018/02/11 12:58

投稿

yamady

スコア176

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -399,3 +399,187 @@
 };
 ```
+## 追記②
+ご指摘いただいたようにすると、どうやらredux部分は解決したように思えるのですが（ありがとうございます！）根本的なエラーはこちらであったようなきがします。
+```JavaScript
+Actions must be plain objects. Use custom middleware for async actions.
+```
+もしかしたら、自分の書き方がひどすぎるのかもしれません（涙
+エラーの続き
+```
+This error is located at:
+    in Home (created by Connect(Home))
+    in Connect(Home) (at SceneView.js:31)
+    in SceneView (at CardStack.js:405)
+    in RCTView (at View.js:71)
+    in View (at createAnimatedComponent.js:147)
+    in AnimatedComponent (at Card.js:26)
+    in Card (at PointerEventsContainer.js:55)
+    in Container (at CardStack.js:436)
+    in RCTView (at View.js:71)
+・・・
+```
+### ソースコード
+> Home.js
+```
+import _ from 'lodash';
+import React from 'react';
+import { connect } from 'react-redux';
+import { ListView, Image, Text, View, StyleSheet } from 'react-native';
+import Screen from '../../ui/components/Screen';
+import { employeesFetch } from '../../ui/redux/uiActions';
+const styles = StyleSheet.create({
+});
+class Home extends React.Component {
+  // Set the navigation options for `react-navigation`
+  static navigationOptions = {
+    headerTitle: 'Home',
+  };
+  componentWillMount() {
+    this.props.employeesFetch();
+    this.createDataSource(this.props);
+  }
+  componentWillReceiveProps(nextProps) {
+    this.createDataSource(nextProps);
+  }
+  createDataSource({ employees }) {
+    const ds = new ListView.DataSource({
+      rowHasChanged: (r1, r2) => r1 !==r2
+    });
+    this.dataSource = ds.cloneWithRows(employees);
+  }
+  render() {
+    console.log(this.props);
+    return (
+      <Screen>
+        <View>
+          <Text>Employee List</Text>
+          <Text>Employee List</Text>
+          <Text>Employee List</Text>
+          <Text>Employee List</Text>
+        </View>
+      </Screen>
+    );
+  }
+}
+const mapStateToProps = state => {
+  const employees = _.map(state.employees, (val, uid) => {
+    return { ...val, uid };
+  });
+  return { employees };
+}
+export default connect(mapStateToProps, { employeesFetch })(Home);
+```

Reduxの中身を追記しました

2018/02/11 12:58

投稿

yamady

スコア176

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -4,6 +4,10 @@
+アプリの内容は雇用者を管理して、情報を投稿するアプリを想定しています。
 ```
 Expected the reducer to be a function
@@ -22,18 +26,6 @@
 ```JavaScript
-/**
- * @flow
- *
- * This file is the main entry point into our app.
- * It is shared across both Android and iOS.
- */
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
@@ -64,8 +56,6 @@
-// Configure `react-native-google-signin` with our client IDs
 GoogleSignin.configure({
   iosClientId: GOOGLE_SIGN_IN_IOS_CLIENT_ID,
@@ -88,20 +78,10 @@
-/*
- * We use flow type to validate the State of the component
- */
 type State = {
-  // Whether Firebase is still checking if the user is logged in or out
   loading: boolean,
-  // The Firebase user
   user?: Object,
 }
@@ -120,8 +100,6 @@
     super();
-    // Set the default state of the component
     this.state = {
       loading: true,
@@ -200,28 +178,6 @@
 ```JavaScript
-/**
- * @flow
- *
- * This file configures the Redux store
- *
- * To keep things simple, and because Firebase already acts as a state management solution,
- * we are only using Redux for the following:
- *
- * 1) `redux-form` integration
- * 2) Basic UI state, i.e. the loading modal
- */
 import { createStore, combineReducers } from 'redux';
 import { reducer as formReducer } from 'redux-form';
@@ -230,6 +186,10 @@
 import uiReducer from '../ui/redux/uiReducer';
+import employeeFormReducer from '../ui/redux/employeeFormReducer';
+import employeeReducer from '../ui/redux/employeeReducer';
 const rootReducer = combineReducers({
@@ -238,6 +198,10 @@
   ui: uiReducer,
+  employeeForm: employeeFormReducer,
+  employees: employeeReducer
 });
@@ -255,3 +219,183 @@
 rootReducerの部分をstoreに変えてみたりもしました。
+## 追記
+reduxを読み込んでいるスクリプトを追記します。
+> uiReducer.js
+```JavaScript
+type UiAction = {
+  type: 'ui/loading/hide' | 'ui/loading/show',
+}
+type UiReduxState = {
+  loading: boolean,
+}
+const initialState = {
+  loading: false,
+};
+export default (state: UiReduxState = initialState, action: UiAction): UiReduxState => {
+  switch (action.type) {
+    case 'ui/loading/hide':
+      return {
+        ...state,
+        loading: false,
+      };
+    case 'ui/loading/show':
+      return {
+        ...state,
+        loading: true,
+      };
+    default:
+      return state;
+  }
+};
+const isLoading = (state: { ui: UiReduxState }) => state.ui.loading;
+export const Store = ({
+  isLoading,
+});
+```
+> employeeForm.js
+```JavaScript
+type UiAction = {
+  type: 'employee_update',
+  type: 'employee_create'
+}
+const initialState = {
+  title: '',
+  category: '',
+  address: '',
+  price: ''
+};
+export default  (state = initialState, action) => {
+  switch (action.type) {
+    case 'employee_update':
+      return {...state, [action.payload.prop]: action.payload.value };
+    case 'employee_create':
+      return initialState;
+    default:
+      return state;
+  }
+};
+```
+> employeeReducer.js
+```JavaScript
+type UiAction = {
+  type: 'employees_fetch_success',
+}
+const initialState = {};
+export default  (state = initialState, action) => {
+  switch (action.type) {
+    case 'employees_fetch_success':
+      return action.payload;
+    default:
+      return state;
+  }
+};
+```