Do I Need Redux To Display Itemlist On The Left And Itemcontent On The Right?

Do I really need Redux to manage the app state to achieve this? If not - How do I manage/implement my routes and state for and / components?

Solution 1:

You don't need to use redux if your app is simple and small. You can use component states to do that. You should always start small and use redux only when your app grows big enough.

---

Now related your question you can keep your main state in <ItemList /> component and pass needed data to <ItemContent /> component based on which item is clicked from the list. Example

classItemListextendsComponent {
  constructor(props) {
    super(props);
    this.state = {
     ...
     // you can keep your data here like// headings and data for the item content
    }
  }

  .
  .
  .
  // your methods
  .
  .
  .
  render() {
    const itemList = //map your list here and// provide a click event which will// render the respective <ItemContent />// may be using an id or some index of the array// depends how you want your data structure to be.return(
      {itemList}
      // based on which item from the list is clicked// you can pass different heading and state
      <ItemContent heading={...} data={...} />
    );
  }
}

---

Edit: Changes in your code.

classExpenseListextendsComponent {

  constructor(props) {
    super(props);
    this.state = {
      currentItemId = this.props.expenses[0].uid
    }
  }

  handleItemClick = (e) => {
    const uid = e.target.id;
    this.setState({ currentItemId: uid });
  }

  details = () => {
    const { expenseList } = this.props.expenses;
    const [ expense ] = expenseList.filter(expense => {
      return expense.uid === this.state.currentItemId;
    });
    return (
      <div><ExpenseDetailsexpenseProps={expense} /></div>
    )
  }

  render () {
    const { expenseList } = this.props.expenses;

    const list = expenseList.map(expense =><Segmentclearingkey={expense.uid} ><ahref="#"id={expense.uid}onClick={this.handleItemClick}>
            {expense.createdAt}
          </a><Buttonfloated='right'>
            Preview / Print
          </Button></Segment>
    )

    return (
      <Gridcelled='internally'><Grid.Row><Grid.Columnwidth={5}><div><h1>Your Expense List:</h1><ButtononClick={this.props.loadSamples}>Load Sample Expenses</Button><Segment.Groupraised>
                {list}
              </Segment.Group></div></Grid.Column><Grid.Columnwidth={11}><Segment>
              {details()}
            </Segment></Grid.Column></Grid.Row></Grid>
    )
  }
}

Note: I haven't tested it.

Solution 2:

For a simple app, I recommend you avoid redux (and especially if you’re new to react). I would use react-router and make a component for each “screen” that has a different url. Store the state in that screen and make all of the other components use props for their data and actions.

For your example:

importReact, { Component } from'react';
import {
  BrowserRouterasRouter,
  Switch,
  Route,
  Link,
} from'react-router-dom'import'./App.css';

classExpenseListextendsComponent {
    render () {
      const {expenses, selectExpense} = this.props;
      return (
        <div>{expenses.map(expense => (
          <divkey={expense.id}><h5>{expense.title}</h5><buttononClick={selectExpense(expense)}>View Details</button></div>
        ))}</div>
      )
    }
  }

classExpenseDetailextendsComponent {
    render () {
      const {expense} = this.props;
      return (
      <div><h1>{expense.title}</h1><p>${expense.amount}</p></div>
      )
    }
  }



classExpenseScreenextendsComponent {
  state = {expenses: [], selectedExpense: null}

  loadSamples = () => {
    // fetch from backend herethis.setState({expenses: [
      {id: 1, title: "Expense 1", amount: 1},
      {id: 2, title: "Expense 2", amount: 2},
      {id: 3, title: "Expense 3", amount: 3},
      {id: 4, title: "Expense 4", amount: 4},
    ]})
  }

  selectExpense = (expense) =>(clickEvent) => {
    this.setState({selectedExpense: expense});
  }

  render() {
    return(
    <divclassName="expense-container"><Linkto="/about">About</Link><divclassName="left-col"><h1>Your Expense List:</h1><buttononClick={this.loadSamples}>Load Sample Expenses</button><ExpenseListexpenses={this.state.expenses}selectExpense={this.selectExpense} /></div><divclassName="right-col">
        {this.state.selectedExpense && <ExpenseDetailexpense={this.state.selectedExpense} />}
  </div></div>);
  }
}


 constAbout = () => (
    <div><h2>About</h2><Linkto="/">Home</Link></div>
  )

classAppextendsComponent {
  render() {
    return (
      <divclassName="App"><Router><Switch><Routepath="/"exactcomponent={ExpenseScreen} /><Routepath="/about"component={About} /></Switch></Router></div>
    );
  }
}

exportdefaultApp;