title: How to display, add and delete items from JSON file using ReactJs
body: <p>I am using ReactJs and I am trying to create CRUD app that will be able to  delete, display and add item to JSON file. With ReactJs I am also using Redux. I am trying to learn how to use ReactJs and Redux together.</p>
  
  <p>JSON file will act like server.</p>
  
  <p>This is my structure for now:</p>
  
  <p><a href="https://i.stack.imgur.com/rvtyu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rvtyu.png" alt="enter image description here"></a></p>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>const logger = createLogger();
  const store = createStore(combineReducers({roomReducer}), {}, applyMiddleware(logger));
  
  
  ReactDOM.render(
  
    &lt;Provider store = {store}&gt;
    &lt;BrowserRouter&gt;
      &lt;App/&gt;
    &lt;/BrowserRouter&gt;
    &lt;/Provider&gt;,
  
    document.querySelector("#root")
  );
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>export default class App extends React.Component {
      render() {
          return (
              &lt;div&gt;
              &lt;Route path="/" exact component={LandingPage} /&gt; 
  
            &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p><strong><em>REDUCERS</em></strong></p>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>import {combineReducers} from 'redux';
  import rooms from '../templates/rooms/Rooms';
  
  const roomsReducer = combineReducers({
    rooms
  });
  
  export default roomsReducer;
  </code></pre>
  
  <p><strong>roomReducer.js</strong></p>
  
  <pre><code>const initialState = {
      rooms: []
    };
  
    export default function cardReducer(state = initialState, action) {
      switch (action.type){
        case 'ADD_ROOM':
          return {
            ...state,
            rooms: [
              ...state.rooms,
              action.rooms
            ]
          }
        case 'REMOVE_ROOM':
  
          //not sure how to do it
  
        case 'FETCH_ROOMS':
          return Object.assign({}, state, {
            cards: action.rooms
          });
        default:
          return state;
      }
    }
  </code></pre>
  
  <p><strong><em>ACTIONS</em></strong></p>
  
  <p><strong><em>roomActions.js</em></strong></p>
  
  <pre><code> export function fetchRooms(){
      return {
        type: 'FETCH_ROOMS'
      }
    }
  
    export function addRoom(){
      return {
        type: 'ADD_ROOM'
      }
    }
  
    export function removeRoom(id){
      return {
        type: 'REMOVE_ROOM',
        id: id
      }
    }
  </code></pre>
  
  <p><strong>db.json</strong></p>
  
  <pre><code> {
   "cards": [
      {
        "id": 0,
        "image": "http://placehold.it/400x300",
        "title": "CATEGORY 0",
        "numberGuests": "Placeholder 0",
        "type": "Single"
      },
      {
        "image": "http://placehold.it/400x300",
        "title": "CATEGORY AAAA",
        "numberGuests": "Placeholder BBB",
        "type": "Single",
        "id": 6
      },
      {
        "image": "http://placehold.it/400x300",
        "title": "CATEGORY AAAA",
        "numberGuests": "Placeholder BBB",
        "type": "Single",
        "id": 7
      }
    ]
  }
  </code></pre>
  
  <p>This code is what I have came up by now. I have created store in my <code>index.js</code> file and connected it to my <code>rooms.js</code> component</p>
  
  <pre><code>class Rooms extends React.Component{
  
      render(){
          return(
              &lt;div&gt;
  
                  hello
  
              &lt;/div&gt;
          );
      }
  }
  
  const mapStateToProps = (state) =&gt; {
      return{
          room: state.roomReducer
      };
  };
  
  
  export default connect(mapStateToProps)(Rooms);
  </code></pre>
  
  <p>I hope I did it correctly. I am not sure how to now add, delete or list rooms that I have already in <code>db.json</code> file.</p>
  
  <p>Any advice or guideline is highly appreciated.</p>