2021 02 18

Learning basics of Redux. Setting up Reducers which remind me of actions in Vuex. The reducer is a way to filter down what kind of action should be done depending on the action type which can be provided. The action type is simply a string.

• We can combine multiple reducer into a centralised redux store using createStore and combineRedicers from the redux package. Basic boilerplate for this looks like:

// ./src/store/conigureStore.ts
import { config } from "process";
import { createStore } from "redux";
import { rootReducer } from "./AppState";

const configureStore = () => {
  return createStore(rootReducer, {});
};

export default configureStore;

// ./src/store/AppState.ts
import { combineReducers } from "redux";
import { UserReducer } from "./UserReducer";

export const rootReducer = combineReducers({
  user: UserReducer,
});

export type AppState = ReturnType<typeof rootReducer>;

// ./src/index.tsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import configureStore from "./store/configureStore";

ReactDOM.render(
  <React.StrictMode>
    <Provider store={configureStore()}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

• Like in Vuex, once the redux store is created, data from the store can be consumed directly without needing to pass in props to the chile components. To do this we makes use of the useSelector hook to tap into redux state, e.g :

const user = useSelector((state: AppState) => state.user);

Read some more of “So good they cant ignore you” . Passion vs Craftsman mentality. Craftsman mind set means you can focus on what you can offer to the world. Some argue that you need passion to learn enable to have the desire to hone your skills further, but often the case is that when you get good at something you start to be come passioniate about it.

• Good projects comes to those who have good skills.