ในการเขียนโค๊ดเพื่อให้เป็นไปแนวทางของ Redux ในตอนแรกอาจเสียเวลาในการเขียนไปบ้าง แต่เมื่อพัฒนาในระบบใหญ่แล้วจะมีประโยชน์มากจะช่วยให้การเขียนโค๊ดเป็นระบบและสามารถตรวจสอบและทำความเข้าใจได้ง่าย เมื่อพร้อมแล้วเรามาลุยกันเลย

โดยสรุปวิธีการมี 6 ขั้นตอน

1.ประกาศ Store ใน App.js

App.js

import React, { Component } from 'react';
import { Button, StyleSheet,Text, View } from 'react-native';
import { Provider } from 'react-redux';
import Login from './Login';
import configureStore from './src/configureStore';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer,useIsFocused} from '@react-navigation/native';
const Stack = createStackNavigator();
const store = configureStore();
export default class App extends Component {
    constructor(props){
    super(props);
    
}
  render() { 
    return (
      <Provider store={store}>
        <NavigationContainer ref={navigationRef} >  
            <Stack.Navigator screenOptions={{headerShown:false }}  >
      
                <Stack.Screen
                    name="Login"
                    component={Login}
                />
      
             </Stack.Navigator>
        </NavigationContainer>
      </Provider>
    
    );
  }

}

2. Configure Store

src/configureStore.js

import {createStore,applyMiddleware} from 'redux';
import reducer from "./reducers";
import thunk from 'redux-thunk';
export default()=>{
    let store = createStore(reducer,applyMiddleware(thunk));
    return store;
}

3. Combine Reducer

reducers/index.js

import {combineReducers}  from 'redux';
import projectReducer from './projectReducer';
import userReducer from './userReducer';
import { reducer as formReducer } from 'redux-form';
export default combineReducers({userReducer,projectReducer, form: formReducer});

4. ประกาศ Reducer

reducers/projectReducer.js

 const initialState = {
  data: {},
  status: "STATUS",
  projects: [],
  old_projects: [],
  favourites: [],
  toggle: false,
  image_path: null,
  image_name:null,
  upload_check: true
}

export default (state = initialState, action) => {
  switch (action.type) {
    case "SEARCH_PROJECT":
      if (action.payload != "") {
        var project = state.old_projects.filter(item => {
          const itemData = item.name.toUpperCase();
          const textData = action.payload.toUpperCase();
          return itemData.indexOf(textData) > -1
        });
      } else {
        var project = state.old_projects;
      }
      return { ...state, projects: project};
    case "CLOSE_EDIT_DAILOG_PROJECT":
      return { ...state, toggle: false, data: {} };
    case "UPLOAD_PROJECT":
      return { ...state, image_path: action.payload.image_path,image_name:action.payload.image_name, upload_check: true, data: state.data }; //image_path = on server 
    case "OPEN_EDIT_DAILOG_PROJECT":
      return { ...state, toggle: true, data: action.payload, image_path: action.payload.image_path,image_name: action.payload.image_name, upload_check: true };
    case "ADD_IMAGE_PROJECT": //image_path =file on local
      return { ...state, toggle: true, data: state.data, upload_check: action.payload == null,image_path:action.payload==null?null: action.payload,image_name:null};
    case "SET_ALL_PROJECT":
      return { ...state, projects: action.payload, old_projects: action.payload };
    case "ROUTE_PROJECT":
      return { ...state, favourites: action.payload };
    case "EDIT_PROJECT":
      return { ...state, status: "edit_complete", projects: state.projects.map((content, i) => content.id === action.payload.id ? { ...content, id: action.payload.id, name: action.payload.name, type_id: action.payload.type_id, category_id: action.payload.category_id, begin_date: action.payload.begin_date, end_date: action.payload.end_date, sequence: action.payload.sequence, is_succeed: action.payload.is_succeed, company_id: action.payload.company_id, user_id: action.payload.user_id, pin: action.payload.pin,image_path:action.payload.image_path,image_name:action.payload.image_name } : content) };
    case "DELETE_PROJECT":
      return { ...state, status: "delete_complete", projects: state.projects.filter(item => item.id !== action.payload) };
    case "ADD_PROJECT":
      return { ...state, status: "add ok", projects: state.projects.concat(action.payload) };
    case "CREATE_FAILURE":
      return { ...state, status: action.payload, isError: true, status: "Error" };
    default:
      return state
  }
};

5. สร้าง Action การเรียกใช้

src/action/project.js

 import { Create, Retrieve, Update, Delete, View, Route } from './api';

const dataname = "projects";
export const setCreateSuccess = (data) => ({
   type: "CREATE_SUCCESS",
   payload: data
})

export const setCreateFailure = (data) => ({
   type: "CREATE_FAILURE",

})

export const setAll = (data) => ({
   type: "SET_ALL_PROJECT",
   payload: data
})

export const SearchText = (data) => ({
   type: "SEARCH_PROJECT",
   payload: data
})

export const getAllItems = () => {
   return (dispatch) => {
      Retrieve(dataname)
         .then(result => {
            dispatch(setAll(result));
         })
         .catch(error => {
            dispatch(setCreateFailure());
         })
   }
}
export const ViewItem = (id) => {
   return (dispatch) => {
      View("project", id)
         .then(result => {
            dispatch(setAll(result));
         })
         .catch(error => {
            dispatch(setCreateFailure());
         })
   }
}

export const Open_edit = (data) => {
   return (dispatch) => {
      dispatch({
         type: "OPEN_EDIT_DAILOG_PROJECT",
         payload: data
      });
   }
}

export const Close_edit = () => {
   return (dispatch) => {
      dispatch({
         type: "CLOSE_EDIT_DAILOG_PROJECT",
      });
   }
}

export const CreateItem = (data) => {
   return (dispatch) => {

      Create(dataname, data)  ///connect to server
         .then(result => {
            dispatch({
               type: "ADD_PROJECT",
               payload: result
            });
         })
         .catch(error => {
            dispatch(setCreateFailure());
         })
   }
}

export const AddImage = (data) => {
   return (dispatch) => {
      dispatch({
         type: "ADD_IMAGE_PROJECT",
         payload: data
      });
   }
}
export const UploadImage = (data) => {
   return (dispatch) => {
      Create("project/upload", data)  ///connect to server
         .then(result => {
            dispatch({
               type: "UPLOAD_PROJECT",
               payload: result
            });
         })
         .catch(error => {
            dispatch(setCreateFailure());
         })
   }
}
export const EditItem = (data) => {
   return (dispatch) => {
      //alert(JSON.stringify(data));
      Update(dataname, data)  ///connect to server
         .then(result => {
            //alert(JSON.stringify(result));
            dispatch({
               type: "EDIT_PROJECT",
               payload: result
            });
         })
         .catch(error => {
            dispatch(setCreateFailure(error));
         })
   }
}

export const PinProject = (data) => {
   return PinItem(data);
}

export const PinItem = (data) => {
   return (dispatch) => {
      Update(dataname, data)
         .then(result => {
            // alert(JSON.stringify(result));
            dispatch({
               type: "EDIT_PROJECT",
               payload: result
            });
         })
         .catch(error => {
            dispatch(setCreateFailure(error));
         })
   }
}
export const GetFavourite = (data) => {
   return (dispatch) => {
      Route("project/get_favourite", "")
         .then(result => {
            dispatch({
               type: "ROUTE_PROJECT",
               payload: result
            });
         })
         .catch(error => {
            dispatch(setCreateFailure(error));
         })
   }
}

export const DeleteProject = (id) => {
   return DeleteItem(id);
}

export const DeleteItem = (id) => {
   return (dispatch) => {
      Delete(dataname, id)
         .then(result => {
            dispatch({
               type: "DELETE_PROJECT",
               payload: result
            });
         })
         .catch(error => {
            dispatch(setCreateFailure());
         })
   }
}

6. สร้าง api.js 

src/action/api.js

 import axios from "axios";
import { AsyncStorage } from 'react-native';
import base64 from "react-native-base64";


export const Signingup = (email, username, password) => {
  const headers = {
    'Content-Type': 'application/json',
  }
  const data = { "username": username, 'email': email, 'password': password }
  return (
    axios.post('https://www.programmerdesign.com/project/site/signup', data, {
      headers: headers
    })
      .then((response) => {
        return response.data.data;
      })
      .catch((error) => {
        return "error";
      })
  );
}

export const Login = (username, password) => {
  const code = 'Basic ' + base64.encode(username + ":" + password)
  const headers = {
    'Authorization': 'Basic ' + base64.encode(username + ":" + password)
  }
  return (
    axios.get('https://www.programmerdesign.com/project/site/login', {
      headers: headers
    })
      .then((response) => {
        const val_token = response.data.token;
        AsyncStorage.setItem('token', val_token);
        return val_token;
      })
      .catch((error) => {
        return null;
      })
  );
}

export const Retrieve = (url) => {
  return (
    AsyncStorage.getItem('token')
      .then((value) => {
        result = axios.get('https://www.programmerdesign.com/project/' + url + '?access-token=' + value)
          .then((response) => {
            return response.data.all;
          })
          .catch((error) => {
            return [];
          })
        return result;
      }
      )

  );
}

export const GetLabel = (url, id) => {
  return (
    AsyncStorage.getItem('token')
      .then((value) => {
        result = axios.get('https://www.programmerdesign.com/project/' + url + '?id=' + id + '&access-token=' + value)
          .then((response) => {

            return response.data.all;
          })
          .catch((error) => {
            return [];
          })
        return result;
      }
      )

  );
}

export const Route = (url, id) => {
  return (
    AsyncStorage.getItem('token')
      .then((value) => {
        result = axios.get('https://www.programmerdesign.com/project/' + url + '?id=' + id + '&access-token=' + value)
          .then((response) => {
            return response.data.all;
          })
          .catch((error) => {
            return [];
          })
        return result;
      }
      )
  );
}

export const RoutePost = (url, data) => {
  const headers = {
    'Content-Type': 'application/json',
  }
  return (
    AsyncStorage.getItem('token')
      .then((value) => {
        result = axios.post('https://www.programmerdesign.com/project/' + url + '?access-token=' + value, data, {
          headers: headers
        })
          .then((response) => {
            return response.data.all;
          })
          .catch((error) => {
            return [];
          })
        return result;
      }
      )
  );
}

export const View = (url, id) => {
  return (
    AsyncStorage.getItem('token')
      .then((value) => {
        result = axios.get('https://www.programmerdesign.com/project/' + url + '/view?id=' + id + '&access-token=' + value)
          .then((response) => {
            return response.data.all;
          })
          .catch((error) => {
            return [];
          })
        return result;
      }
      )
  );
}

export const Upload = (url, data, id) => {
  const headers = {
    'Content-Type': 'application/json',
  }
  return (
    AsyncStorage.getItem('token')
      .then((value) => {
        result = axios.post('https://www.programmerdesign.com/project/' + url + '?id=' + id + '&access-token=' + value, data, {
          headers: headers
        }).then((response) => {
          return response.data.data;
        })
          .catch((error) => {
            return "error";
          })
        return result;
      }
      )
  );
}


export const Create = (url, data) => {
  const headers = {
    'Content-Type': 'application/json',
  }
  return (
    AsyncStorage.getItem('token')
      .then((value) => {
        result = axios.post('https://www.programmerdesign.com/project/' + url + '?access-token=' + value, data, {
          headers: headers
        }).then((response) => {
          return response.data.data;
        })
          .catch((error) => {
            return [];
          })
        return result;
      }
      )
  );
}


export const DeleteAll = (url, data) => {
  const headers = {
    'Content-Type': 'application/json',
  }
  return (
    AsyncStorage.getItem('token')
      .then((value) => {
        result = axios.post('https://www.programmerdesign.com/project/' + url + '?access-token=' + value, data, {
          headers: headers
        }).then((response) => {
          return response.data.data;
        })
          .catch((error) => {
            return [];
          })
        return result;
      }
      )
  );
}

export const Update = (url, data) => {
  const headers = {
    'Content-Type': 'application/json',
  }
  return (
    AsyncStorage.getItem('token')
      .then((value) => {
        result = axios.put('https://www.programmerdesign.com/project/' + url + '/' + data.id + '?access-token=' + value, data, {
          headers: headers
        }).then((response) => {
          return response.data.data;
        })
          .catch((error) => {
            return [];
          })
        return result;
      }
      )
  );
}
export const Delete = (url, id) => {
  return (
    AsyncStorage.getItem('token')
      .then((value) => {
        result = axios.delete('https://www.programmerdesign.com/project/' + url + "/" + id + '?access-token=' + value)
          .then((response) => {
            return response.data.data;
          })
          .catch((error) => {
            return [];
          })
        return result;
      }
      )
  );
}

โดย 6 ขั้นตอนนี้เป็นแค่การเตรียมความพร้อมเท่านั้น