如何使用ReactJs显示，添加和删除JSON文件中的项目

Question

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.

JSON file will act like server.

This is my structure for now:

index.js

const logger = createLogger();
const store = createStore(combineReducers({roomReducer}), {}, applyMiddleware(logger));


ReactDOM.render(

  <Provider store = {store}>
  <BrowserRouter>
    <App/>
  </BrowserRouter>
  </Provider>,

  document.querySelector("#root")
);

App.js

export default class App extends React.Component {
    render() {
        return (
            <div>
            <Route path="/" exact component={LandingPage} /> 

          </div>
        )
    }
}

REDUCERS

index.js

import {combineReducers} from 'redux';
import rooms from '../templates/rooms/Rooms';

const roomsReducer = combineReducers({
  rooms
});

export default roomsReducer;

roomReducer.js

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;
    }
  }

ACTIONS

roomActions.js

 export function fetchRooms(){
    return {
      type: 'FETCH_ROOMS'
    }
  }

  export function addRoom(){
    return {
      type: 'ADD_ROOM'
    }
  }

  export function removeRoom(id){
    return {
      type: 'REMOVE_ROOM',
      id: id
    }
  }

db.json

 {
 "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
    }
  ]
}

This code is what I have came up by now. I have created store in my index.js file and connected it to my rooms.js component

class Rooms extends React.Component{

    render(){
        return(
            <div>

                hello

            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return{
        room: state.roomReducer
    };
};


export default connect(mapStateToProps)(Rooms);

I hope I did it correctly. I am not sure how to now add, delete or list rooms that I have already in db.json file.

Any advice or guideline is highly appreciated.

Answer 1

 let dbjson = { "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 } ] }; let state = {}; //You have cards in state state['rooms'] = dbjson.cards; // add room let roomItem = { "image": "http://placehold.it/400x300", "title": "CATEGORY AAAA", "numberGuests": "Placeholder BBB", "type": "Single", "id": 8 }; let rooms = [...state.rooms,roomItem]; state['rooms'] = rooms; //dispatch // remove room by index let index = 1; let roomstodelete = [...state.rooms]; roomstodelete.splice(1,index); state['rooms'] = roomstodelete; //dispatch // remove room by id let roomstodeleteByid = [...state.rooms].filter(vl=>vl.id!==8); state['rooms'] = roomstodeleteByid; //dispatch