1
\$\begingroup\$

I started learning about React and redux recently and I created a dummy project based on drf-redux project and react-redux-quiz-game

This application uses Django rest framework for API and React with Redux for front end.

A user sees options to add/edit/delete questions and answers in admin mode. In student mode user can submit the answers.

index.js as entry point

import React from 'react';
import { render } from 'react-dom';
import configureStore from './store/configureStore';
import Root from './containers/Root';

const store = configureStore();

render(
  <Root store={store} />,
  document.getElementById('root')
);

configureStore.js

import { createStore, compose, applyMiddleware } from 'redux';
import promise from 'redux-promise';
import { persistState } from 'redux-devtools';
import rootReducer from '../reducers';

const enhancer = compose(
  applyMiddleware(promise)
);

export default function configureStore(initialState) {
  const store = createStore(rootReducer, initialState, enhancer);

  if (module.hot) {
    module.hot.accept('../reducers', () =>
      store.replaceReducer(require('../reducers').default)
    );
  }

  return store;
}

ques.js as reducer

    import { GET_QUES, ADD_QUES, DELETE_QUES, EDIT_QUE} from '../constants/ActionTypes';

const initialState = [];

export default function ques(state = initialState, action) {
  switch (action.type) {

  case GET_QUES:
    return [...action.ques];

  case ADD_QUES:
    return [...state, action.que];

  case DELETE_QUES:
    return state.filter(que =>
      que.id !== action.id
    );
  case EDIT_QUE:
    return state.map(que =>
      que.id === action.que.id ? action.que : que
    );
  default:
    return state;
  }
}

QuesApp.js as first container

   import React, { Component } from 'react';
    import { connect } from 'react-redux';
    import { bindActionCreators } from 'redux';
    import {Link} from 'react-router';
    import classnames from 'classnames';

    import QuesSection from '../components/QuesSection';
    import QuestionsHandler from '../components/QuestionsHandler';
    import * as QuesActions from '../actions/QuesActions';

    class QuesApp extends Component {

      componentDidMount() 
      {
            this.props.actions.getQues();
      }

      render() 
      {
        const { ques, actions } = this.props;

        return (
          <div>
            <QuestionsHandler addQues={actions.addQues} />
            <h3>Questions List</h3>
            {this.props.ques.map((question, i) => <QuesSection {...this.props}
                        key={i} i={i} question={question}/>)}
            <Link to={"quiz/"}>Student Mode</Link>
          </div>
        );
      }
    }

    function mapState(state) {
      return {
        ques: state.ques
      };
    }

    function mapDispatch(dispatch) {
      return {
        actions: bindActionCreators(QuesActions, dispatch)
      };
    }

    export default connect(mapState, mapDispatch)(QuesApp);

QuestionsHandler.js as a component

    import React, { PropTypes, Component } from 'react';
import classnames from 'classnames';

export default class QuestionsHandler extends Component 
{

  constructor(props, context) 
  {
    super(props, context);
    this.state = {
                    question: this.props.question || '',
                    answer: this.props.answer || ''

                  };
  }

  static propTypes = {
        question: PropTypes.string,
        answer: PropTypes.string,
        placeholder: PropTypes.string,
  };

  handleSubmit(e)
  {
        e.preventDefault();
        const question = this.refs.question.value;
        const answer = this.refs.answer.value;

        this.props.addQues(question,answer);
        this.refs.questionForm.reset();
  }


  render() {
    return (
      <header className='header'>
          <h2>Manage Questions</h2>
          <h4>Add a question</h4>
          <div className="list-group-item">
                    <form ref='questionForm' onSubmit={this.handleSubmit.bind(this)}>
                        Question: <input type='text' ref='question' placeholder='Question'/><br/>
                        Answer: <input type='text' ref='answer' placeholder='Answer'/><br/><br/>

                        <input type='submit'/>
                    </form>
            </div>
      </header>
    );
  }
}
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.