mercykip

import 'package:app_name/application/theme/colors.dart';
import 'package:flutter/material.dart';

/// colors used:
Color blue3 = const Color.fromARGB(0xFF, 0x74, 0xDB, 0xEF);
Color blue4 = const Color.fromARGB(0xFF, 0x5E, 0x88, 0xFC);

class Calculator extends StatefulWidget {
  Calculator({Key key}) : super(key: key);

mercykip

import 'package:app_name/application/theme/colors.dart';
import 'package:flutter/material.dart';

Color blue4 = const Color.fromARGB(0xFF, 0x5E, 0x88, 0xFC);
Color blue2 = const Color.fromARGB(0xFF, 0xAF, 0xFF, 0xFF);

class ColumnRow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(

mercykip

import 'package:app_name/application/theme/colors.dart';
import 'package:flutter/material.dart';

Color blue4 = const Color.fromARGB(0xFF, 0x5E, 0x88, 0xFC);
Color blue2 = const Color.fromARGB(0xFF, 0xAF, 0xFF, 0xFF);

class ColumnRow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(

mercykip

 const getUser = () => {
    return {
        type: 'GET_USER',
        payload:  {name: "mercy", gender: "Female"}
    }
}

mercykip

/// action creator which gets user data from an API
export const getUserAction = (id) => {
    return (dispatch) => {
        axios.get(`https://ti-react-test.herokuapp.com/users/${id}`)
            .then(response => {
                console.log(response);
                dispatch(getUser(response.data)
                );
            })
            .catch(error => {

mercykip

const initialState = {
  /// users is an empty list of a list of users
    users: [],
};

 const userReducers = (state = initialState, action) => {
    switch (action.type) {
        case "ADD_USER":
            return {
              ///the three dots are ES6 syntax(spread operator), it allows you to create copy of an abject

mercykip

export const addUser = (user) => {
    return {
        type: 'ADD_USER'
        payload: user
    }
}

mercykip

/// add a new user
export const addUserAction = (user) => {
    return (dispatch) => {
        /// axios is a library used to make request to an API, 
        /// return data and manipulate the data .
        axios.post('https://ti-react-test.herokuapp.com/users', user)
            .then(response => {
                console.log(response);
                dispatch(addUser(response.data))
            })

mercykip

import { createStore, applyMiddleware, compose } from 'redux';
import reducers from './reducer/index';
import thunk from 'redux-thunk';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
/// store holds the state of the application
const store = createStore(reducers, {}, composeEnhancers(applyMiddleware(thunk)));
export default store;

mercykip

import { combineReducers } from "redux";
import { userReducers } from "./reducer";
/// combine reducer helps your reducer to manage their own slices of state.
/// it will combine all reducers passed to it into a single reducing function 
/// that can be exported as default
const reducers = combineReducers({
    user: userReducers
});
export default reducers;