React-Redux Flow: Detailed Guide

//Here we can't assign the named instance to a new object,
//but we can change the object it is assigned to. This object is mutable.
const obj = {a: 1, b: 2}
obj.a = 3
console.log(obj.a) // 3

//But if we use Javascript's Object.freeze() method we gain immutablity.
const obj = {a: 1, b: 2}
Object.freeze(obj) // This makes the object immutable.
obj.a = 3 //
console.log(obj.a) // 1

// Auth is a parent component.
const Auth = () => {
 const [isLogged, setLogin] = useState(false)
// It holds the state for it's two children components despite not needing the state itself.
// This is the method used to update the state when an action is carried out in a sibling component.
 
 const setLogin = (username, password) => { 
   if (username === user && password === pass) {
     setLogin(true)
   }
 }
 return (
  <div>
    // Here the state is passed down to the child component as a props and 
    //updated when an action is carried out in the second child component.
    <Status status={isLogged}/> 
    
    <Login handleLogin={setLogin}/> 
  // This child commponent carries out the action that changes the state, 
  // receiving setLogin method as a props.
  </div>
 )
}

{
  type: 'CHANGE TO SOLID',
  payload: {
            state: solid
  }
}

const changeToIce = (solid) => ({
  type: 'CHANGE TO SOLID',
  payload: {
            state: solid
  }
})

const waterReducer = (state = initialState, action) => {
  switch (action.type) {
  case 'CHANGE TO SOLID':
    return {...state, action.payload }; //Here action.payload will be solid.
  case 'CHANGE TO LIQUID':
    return {...state, action.payload}; //Here action.payload will be liquid.
  default:
     return state // This will return the default state which we would set as gas,
                  // if any of the above cases don't checkout.
  }
}

const store = createStore(waterReducer)

// actions/index.js

const ADDBOOK = book => ({
  type: "ADD BOOK",
  book
});

const REMOVEBOOK = book => ({
  type: "DELETE BOOK",
  book
});

const FILTER = filter => ({
  type: "FILTER",
  filter
});

export { ADDBOOK, REMOVEBOOK, FILTER };

//reducers/book.js

const initialState = [
  {
    name: "The Intelligent Investor",
    author: "Ben Graham"
  },
  {
    name: "Harry Potter and the Philosopher's Stone",
    author: "J. K. Rowling"
  }
];

const addBook = (state = initialState, action) => {
  switch (action.type) {
    case "ADD BOOK":
      return [...state, action.book];
    case "DELETE BOOK":
      return [...state].filter(bk => bk !== action.book);
    default:
      return state;
  }
};

export default addBook;

//reducers/filter.js

const filter = (state = "", action) => {
  switch (action.type) {
    case "FILTER":
      return action.filter;
    default:
      return state;
  }
};

export default filter;

//src/index.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";
import rootReducer from "./reducers/index";
import App from "./components/App";

const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

//components/book.js

import React from "react";
import PropTypes from "prop-types";

const Book = ({ bk, handleRemove }) => (
  <div style={{ border: "1px solid green", padding: "5px" }}>
    <h2>{bk.name}</h2>
    <h3>{bk.author}</h3>
    <button type="button" onClick={() => handleRemove(bk)}>
      Delete
    </button>
  </div>
);

Book.propTypes = {
  bk: PropTypes.shape({
    name: PropTypes.string,
    author: PropTypes.string
  }).isRequired
};

export default Book;

//containers/bookList.js

import React from "react";
import { CREATEBOOK, REMOVEBOOK, FILTER } from "../actions/index";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import Filter from "../components/filterBook";
import Book from "../components/book";

const mapStateToProps = state => ({
  books: state.book,
  filter: state.filter
});

const mapDispatchToProps = dispatch => ({
  addBook: book => dispatch(CREATEBOOK(book)),
  deleteBook: book => dispatch(REMOVEBOOK(book)),
  filterInput: string => dispatch(FILTER(string))
});

const BookList = ({ filter, filterInput, books, deleteBook }) => {
  const handleRemove = bk => deleteBook(bk);

  const handleFiltering = books => {
    if (filter !== "" && filter.split("")[filter.length - 1] !== "\\") {
      const pattern = new RegExp(`${filter}`, "i");
      const filtered = books.filter(book => pattern.test(book.name));
      return filtered.map((bk, i) => (
        <Book bk={bk} key={bk.name + i} handleRemove={handleRemove} />
      ));
    }
    return books.map((bk, i) => (
      <Book bk={bk} key={bk.name + i} handleRemove={handleRemove} />
    ));
  };

  const handleFilterChange = e => {
    filterInput(e.target.value);
  };

  return (
    <div>
      <Filter filter={filter} handleFilterChange={handleFilterChange} />
      <h1>Books</h1>
      {handleFiltering(books)}
    </div>
  );
};

BookList.propTypes = {
  filter: PropTypes.string.isRequired,
  filterInput: PropTypes.func.isRequired,
  books: PropTypes.arrayOf(Object).isRequired,
  deleteBook: PropTypes.func.isRequired
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(BookList);

//containers/bookForm.js

import React from "react";
import { connect } from "react-redux";
import { ADDBOOK } from "../actions/index";
import PropTypes from "prop-types";

const mapDispatchToProps = dispatch => ({
  createBook: book => dispatch(ADDBOOK(book))
});

const BookForm = ({ createBook }) => {
  const handleSubmit = e => {
    e.preventDefault();
    const formElems = e.target.elements;
    const bookName = formElems.bookName.value;
    const author = formElems.author.value;
    formElems.bookName.value = "";
    formElems.author.value = "";
    return createBook({ name: bookName, author });
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <h1>Kindly input the book details</h1>
        <label htmlFor="bookName">
          Book Name
          <input type="text" name="bookName" id="bookName" required />
        </label>
        <label htmlFor="author">
          Book Author
          <input type="text" name="author" id="author" required />
        </label>
        <input type="submit" value="Create Book" />
      </form>
    </div>
  );
};

BookForm.propTypes = {
  createBook: PropTypes.func.isRequired
};

export default connect(
  null,
  mapDispatchToProps
)(BookForm);

//components/filter.js

import React from "react";
import PropTypes from "prop-types";

const Filter = ({ filter, handleFilterChange }) => (
  <div>
    <h3>Search Available Books</h3>
    <input value={filter} type="text" onChange={handleFilterChange} />
  </div>
);

Filter.propTypes = {
  filter: PropTypes.string.isRequired,
  handleFilterChange: PropTypes.func.isRequired
};

export default Filter;