react redux structure [method-2]

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

React Redux Structure [Method-2]

method-1: available in here ❤️

Install

1. create-react-app

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

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

2. Only Redux

npm install redux

3. Fast Navigating

npm install react-router-dom

6. Sass Supporting

npm install node-sass

7. All icon in one place

npm install react-icons --save

8. Normalize your style

npm install --save normalize.css
then, import in index.js or App.js before all styles
import 'normalize.css';

Coding

Structure

• src/
  • index.js
  • App.jsx
  • components/
    • my-component.jsx
    • ...{OTHER_COMPONENTS}.jsx
  • store/
    • my-store.js
    • ...{MY_OTHER_STORE}.js [create your own stores]
    • constants.js
    • index.js

🤗 ❤️

src_App.jsx

import React from 'react';
import MyComponent from './components/my-component.jsx';

class App extends React.Component {
  constrcutore(props){
    super(props);
    this.state = {};
  }
  
  render(){
    return(
      <>
        <MyComponent />
        {/* INSERT_OTHER_COMPONENTS */}
      </>
    );
  }
}

export default App;

src_components_my-component.jsx

import React from 'react';
import { MyStore, myStore } from '../store/index.js';
import { MY_ACTION } from '../store/constants.js';

// also, we can use `import MyStore, { store as myStore } from '../store/my-store.js';`

class MyComponent extends React.Component {
  constructor(props){
    super(props);
    this.state = {};
  }
  
  handleEvent(){
    MyStore('my-value');
    
    // OR (tips: for this way, you should calcing data in here, then dispatch actions)
    myStore.dispatch({
      type: MY_ACTION,
      payload: 'my-value',
    });
  }
  
  render(){
    return(
      <>
        <h1 className="my-component">Hi { myStore.getState().myState }</h1>
        <button onClick={this.handleEvent}> change times </button>
      </>
    );
  }
}

export defualt MyComponent;

src_index.js

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

// import your stylesheets in here

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

src_store_constants.js

const MY_ACTION = 'MY_ACTION';
const MY_OTHER_ACTION = 'MY_OHTER_ACTION';

// ... write other actions constants in here ...

export {
  MY_ACTION,
  MY_OTHER_ACTION,
  // ... export other actions constants in here ...
};

src_store_index.js

import constants from './constants.js';

// import stores in here
import MyStore, { store as myStore } from './my-store.js';

export {
  constants,
  MyStore,
  myStore
  // ... export other stores ...
};

src_store_my-store.js

import { createStore } from 'redux';
import { MY_ACTION } from './constants.js';

// explaning: for each store, we should import that action constant

const initailState = {};
const myReducer = (state = initialState, action) => {
  switch (action.type) {
    case MY_ACTION:
      return {
        ...state,
        myState: action.payload,
      };
    default:
      return state;
  }
};
const store = createStore(myReducer, initialState);

const MyStore = (params) => {
  // ... doing calicing with data before calling dispatch and after calling this function ...

  store.dispatch({
    type: MY_ACTION,
    payload: params,
  });

};

export { store, myReducer as reducer };
export default MyStore;