React Redux Structure [method-1]

react-redux-structure-[method-1].md

React Redux Structure [Method-1]

i try to make code simple for scalable and resuable structure ❤️

Install

1. create-react-app

npx create-react-app {APP_NAME} --use-npm

then, we should change currect directory with cd {APP_NAME}

2. Any Redux

npm install redux react-redux redux-thunk

3. Fast Navigating

npm install react-router-dom

6. Sass Supporting

npm install node-sass

Coding

Structure

• src/
  • index.js
  • App.jsx
  • components/
    • my-component.jsx
    • ...{OTHER_COMPONENTS}.jsx
  • store/
    • reducers/
      • ...{MY_REDUCERS_FUNCTION}.js
      • index.js
    • actions/
      • ...{MY_ACTIONS_FUNCTION}.js
      • constant.js [save-your-constant-action-name]
      • index.js
    • index.js

src_App.jsx

// ./App.jsx
import React from 'react';
import { Provider } from 'react-redux';
import store from './store/index.js';

// App - who is your root component
const App = (props) => {
  return(
    <>
      <Provider store={ store }>
        <Components />
      </Provider>
    </>
  );
};

export default App;

src_components_my-component.jsx

// ./components/my-component.jsx
import React from 'react';
import PropTypes from 'prop-type';
import { connect } from 'react-redux';
import { myAction } from '../store/action/my-action.js';

// Explan :
// `PropTypes` : for checking types of props passing to components

class MyComponent extends React.Component {
  constructor(props){
    super(props);
    this.state = {};
  }
  
  render(){
    return(
    <div className="yek-component__element">
      { this.props.MyState.myState }
    </div>
    );
  }
}

// here, we use props-type for checking props data-type
Mycomponent.propTypes = {
  // in this case, my `MyState` who reference to `myState` keyword on redux state, is `string` type
  MyState: PropTypes.string.isRequired,
};

// mapStateToProps is a custom function to send to `connect` react-redux for
// overloading redux states on props to using state in props keyword (e.g. `this.props.myState`)
const mapStateToProps = (state) => ({
  // `MyReducer` come from `reducers/index.js` who passed to `cobineReducers`
  // `MyState` is keyword to contain all redux-states and pass to props then use it in components e.g. `this.props.MyState`
  MyState: state.MyReducer,
});

// instead this export defualt MyComponent;
// use
export default connect(null, { myAction })(MyComponent);

src_index.js

// ./index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

// import stylesheets in here...

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

src_store_actions_constant.js

// ./store/actions/constant.js
export const MY_ACTION = 'MY_ACTION';
export const MY_OTHER_ACTION = 'MY_OTHER_ACTION';

src_store_actions_my-action.js

// ./store/actions/my-action.js
import { MY_ACTION } from './constant.js';

function myAction(){
  return function(dispatch){
    // write here your code you want to calcing data
    // then, call dispatch, and dispatch call setState to store(save) data
    dispatch({
      type: MY_ACTION,
      payload: {
        
        // actually, payload can be not object, alike, `payload: 'my-value'`
        value: 'my-value',
        
        // also, you can use any keyword in this object
        myParam: 'my-param-value',
      },
    });
  };
};

export MyAction;

src_store_index.js

// ./store/index.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index.js';

const initialState = {};
const middlewares = [thunk];
const store = createStore(
  rootReducer,
  initialState,
  applyMiddleware(...middlewares)
);

export default store;

src_store_reducers_index.js

// ./store/reducers/index.js
import { combineReducers } from 'redux';

// import your reducers in here...
import MyReducer from './my-reducer.js';

export default combineReducers({
  MyReducer: MyReducer,
});

src_store_reducers_my-reducer.js

// ./store/reducers/my-reducer.js

import { MY_ACTION } from '../actions/constant.js';

const initialState = {};

const MyReducer = (state = initialState, action) => {
  switch (action.type) {
    case MY_ACTION:
      return {
        // return clone of all state, then
        ...state,
        
        // change `myState` with payloaded value as parameter
        myState: action.payload.myParam
      };
    default:
      return state;
  }
};

export default MyReducer;