DEV Community: hiro@

Devin

hiro@ — Tue, 15 Apr 2025 00:25:12 +0000

similar redux architecture example powered by react hooks API

hiro@ — Sun, 06 Jan 2019 15:12:00 +0000

I guess you guys have known hooks API already, haven't you? This article is one of the examples for React hooks API. First of all, here is the example code which I'm gonna describe it.
https://github.com/takahiro-saeki/react-example-code/tree/master/chapter2

and here is an example's screenshot.

Let's get started!

Redux architecture with hooks API without Redux.

architecture structure.

./chapter2
├── index.html
├── package.json
└── src
    ├── Context.jsx
    ├── Provider.jsx
    ├── actions
    │   └── index.js
    ├── components
    │   ├── Header
    │   │   ├── index.jsx
    │   │   └── style.js
    │   ├── List
    │   │   ├── index.jsx
    │   │   └── style.js
    │   ├── ListArea
    │   │   ├── index.jsx
    │   │   └── style.js
    │   └── index.js
    ├── connect.js
    ├── containers
    │   └── App
    │       └── index.js
    ├── index.js
    ├── modules
    │   ├── fetchLogic.js
    │   ├── getFavoItems.js
    │   ├── getSearch.js
    │   └── useWindowWidth.js
    ├── pages
    │   └── MainView
    │       └── index.jsx
    ├── reducers
    │   ├── combineReducers.js
    │   ├── favorite.js
    │   ├── index.js
    │   └── posts.js
    └── store.js

It seems like similar to redux architecture. But there are no redux dependencies in this example.
and main logic is in index.js where is a root.

import React from 'react';
import { render } from 'react-dom';
import reducers from './reducers';
import Provider from './Provider';
import App from './containers/App';

document.body.style.margin = 0;

const Main = () => (
  <Provider reducer={reducers}>
    <App />
  </Provider>
);

render(<Main />, document.querySelector('#app'));

This Provider component has a reducer props, which passes to Context API.
take a look at Provider 's logic.

import React, { useState, useReducer, useEffect } from 'react';
import Context from './Context';

type Props = {
  children: any,
  reducer: () => {}
};

const Provider = ({ children, reducer }: Props) => {
  const [store, dispatch] = useReducer(reducer);
  const [state, setState] = useState({ isLoaded: false });

  useEffect(() => {
    dispatch({ type: '@init' });
    setState({ isLoaded: true });
  }, []);

  return (
    <Context.Provider value={{ dispatch, store }}>
      {state.isLoaded ? children : false}
    </Context.Provider>
  );
};

export default Provider;

Provider component has 2 props. 1st one is children , second one is reducer .
Inside of useEffect 's dispatch is, it's necessary for making store from reducer.
Same as redux's reducer, it is mandatry to set default state params in each reducer otherwise it will occur unexpected error.
And inside of combineReducer.js , it's combined each reducer which is being set as argument in combineReducer function.
Take a look at inside of combineReducer.js .

const combineReducers = reducer => {
  return (state = {}, action) => {
    const keys = Object.keys(reducer);
    const nextReducers = {};
    for (let i = 0; i < keys.length; i++) {
      const invoke = reducer[keys[i]](state[keys[i]], action);
      nextReducers[keys[i]] = invoke;
    }
    return nextReducers;
  };
};

export default combineReducers;

I mimicked redux combineReducer. I didn't know that reducer will be invoked every single time when action is dispatched.

connect logic

connect logic is really simple Higher Order Component.

import React, { useContext } from 'react';
import Context from './Context';

const connect = (mapState, mapDispatch) => {
  return WrappedComponent => {
    return () => {
      const { store, dispatch } = useContext(Context);
      return (
        <WrappedComponent {...mapState(store)} {...mapDispatch(dispatch)} />
      );
    };
  };
};

export default connect;

to use Context API as Hooks is so simple to use it. share store to mapState, share dispatch to mapDispatch, then you can use mapStateToProps and mapDispatchToProps like redux in presentational component everywhere if you connect it.

const App = ({ posts, addTodo, addFavoItem, favorite }) => {
  /* ...logics */
  return <MainView {...hundlers} />;
};

const mapStateToProps = store => ({
  posts: store.posts.data,
  favorite: store.favorite.favorite_posts
});

const mapDispathToProps = dispatch => ({
  addTodo: param => dispatch(addTodo(param)),
  addFavoItem: param => dispatch(addFavoItem(param))
});

export default connect(
  mapStateToProps,
  mapDispathToProps
)(App);

Seems like redux, right?

In conclusion.

In my humble opinion, I think it's really difficult to replace redux for using hooks api like redux. but it's possible and you can make similar logic like redux.
but if you are using redux middleware like redux-saga, you might have to think how to optimize those middleware.
And I wanna try to replace redux from example app which is using redux-saga or thunk or whatever famous library which people are heavily using in redux environment.

Another thing is that I'm feeling important, to use hooks api is improving DX for you definitely. So far I would love that. I might write something tutorial about hooks which is more porite and neat than this article. haha

Thanks and if you have a question, feel free to reach out to me. Any question is ok.
Bye!!

Daily Blog Vol.3

hiro@ — Thu, 04 Oct 2018 13:40:28 +0000

My recent interests

Nowadays, I made a account for NISA . You might have already know about ISA . Since 1999, England government started for facilitating people who invest. And Japan, in Japanese meaning of it is NIHON , so initial is N . N + ISA = NISA. That's why we call it as a NISA . recently, I was interested in investment which isn't like gamble.
speaking As a young (but not young, not old) Japanese guy, Investment sounds like doubtful. I've heard fraud cases about ICO through articles or internet media or youtube. Last year, cryptocurrencies were so popular and it was spreaded
out on Japan.
I guess many people were interested in it. At the same time, ICO fraud cases had been occurred continually. Therefore I'm so interested in cryptocurrency and blockchain technology, I've never had it.
So, I've been reading articles about it and reading document of blockchain library such as web3.js .
Then, suddenly, I was starting thinking about my life. I like to develop, make app, keep catching up new technology, and something like that. but I'm kind of getting bored easily. Personally though, I was promoted music school, then graduated as a Associate degree. So, I was into composing music, gigging, playing instruments such as Guitar, Base, Drums and Keyboard. Totally about 8 years of my music career which is included hobby which is especially when I was high school student. This was proud of myself and never forget in my mind, but I suddenly quit everything because I got into web technology.
In conclusion, I might get board of developing suddenly when I come across of what I'm addicted. To know those of what cryptocurrency and investment made me grow up to me in the future probably. So, I'm getting caching up those things day by day slowly.

other thing of Javascript

I recently upgraded create-react-app to 2.0.4 from 1.x.x. Sometimes (not often, just sometimes), I read code which is its webpack config and inside of CRA. this is good to learn how to use webpack and configure webpack. code reading is really important for developer, especially internal of CLI should be helpful for you if you have to manage SPA environment application or complicated application.
Personally, when I use webpack, I write about webpack build or start server to package.json , but create-react-app's start script is node scripts/start.js .
This means that create-create-app invokes start script from scripts/start.js file by invoking node api. The thing is that inside of scripts.start.js is written about invoking webpack-dev-server, and some logic sequentially.
I didn't read deeply yet, so just that's it though.

So, today's myblog is done. see you tomorrow.

Daily Blog Vol.2

hiro@ — Wed, 03 Oct 2018 15:11:52 +0000

My issues about web components

I've been interested in using web components as my hobby project. also I've written about it at my self-publication book for 2 times. it made me gaining my knowledge of it though, I still have a question or problem about it.

Hot Module Replacement problem.

Have you tried to setup HMR for your project which is used web components? I've tried it, but it didn't work well for me. Honestly, I've not tried for SPA environment. it's just for static page or simple page, so it's not big problem for me. but what if you (of course it's included me) wanna use web components for project which is SPA environment? Can't use HMR for SPA environment should be crucial probably. at least I must be troublesome.

Why can't we use HMR on web components project?

Simply, if custom elements's registered, you can't revoke it. custom elements doesn't have a specification for revoking defined custom elements from customElementsRegister. This is the point, we can't use HMR. if it's possible, we can revoke defined custom elements, then redefine new custom elements. Let me describe about it as below.


import { html, render } from 'lit-html';

class SampleBtn extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
  }

  template() {
    // I assume to change "test!!!" to "this is it!" later for checking whether HMR works or not.
    return html`<div>test!!!</div>`;
  }

  render() {
    render(this.template(), this.shadow);
  }

  connectedCallback() {
    this.render();
  }
}
if (!window.customElements.get('SampleBtn')) {
  window.SampleBtn = SampleBtn;
  window.customElements.define('sample-btn', SampleBtn);
}

this is a entry point.

import './web-components/SampleBtn';

if (module.hot) {
  module.hot.accept('./web-components/SampleBtn.js', () => {
    // Somehow I wanted to enable HMR for web components,
    // fortunately, it did work for javascript, but custom elements didn't update itself.
    // here is empty now, but I tried many things.
    // However, Everything was failed.
  });
}

Internal of SampleBtn 's code which is such as console.log was invoked well, but if I changed inside of template() method, HMR didn't work well.
I'm kind of feeling, if HMR doesn't work well for project of web components which is SPA environment, it's inconvenient as I firstly mentioned.

I should gain knowledge of behind of how HMR works or custom elements or something like that though, I fatigued actually.
Well, this is my today's research of web components (custom elements) on HMR environment.

if you have a question or advice to me, feel free to reach out to me on here or twitter !

That's it! See you tomorrow!

Daily Blog Vol.1

hiro@ — Tue, 02 Oct 2018 15:38:21 +0000

I just started my blog on Dev.to because this site is so fast and comfortable for me. Thanks Ben Halpern. Honestly, I was thinking whether use medium or this site. but I think this site is faster than medium, so I would like to use as a my blog more than medium.
To be honest, I think medium is awesome platform, so I don't think it's bad. but I care about how fast it is, so I chose here.

before I start writing my blog, I would like to introduce by myself again.
my name is takahiro, people who are my friends call me hiro. I'm front end developer, especially I'm good at using React.js and React-Native. of course I'm using it for work. I'm working 2 company currently. First one is as a front-end developer, I'm maintaining and implementing SPA environment. Second one is I'm using React-Native. You might have already known that React.js and React-Native, either libraries are so awesome and have mature ecosystem. I'm kind of obsessed to use those libraries.
I'm so interested in javascript standards especially ECMAScript's specification.

I don't wanna long introduction, so just start it!

react-native-gifted-chat is itchy for me

react-native-gifted-chat is awesome library for making chat feature in React-Native. This library has a bunch of features itself. also, I'm using it at work though, I got some problem like below.

less description how to use props such as renderSystemMessage , renderCustomView ,
renderSystemMessage might not be able to use it itself. I've been reading code which is internal, I'm getting understanding it but I guess they need to prepare more polite document probably. However they don't have a enough time to maintain this library, so I might have to understand by myself (after that I would better write blog which is how to use it probably. ) , or make PR to them. anyway, as a userland, I felt it's not enough document or sample code.

web-components might have a problem for future.

I would like web components. I write books about what's web-components and how to resolve problems if you use web components. I'm really sorry, it's written in Japanese and it's my self-publication, so it might be inconvenient to you but if you interested in it, feel free to mention to me on twitter or send DM to me.
Anyway, I love web components. but I've been faced where I would better web components. For just static web site? or SPA environment with popular frameworks such as Vue.js, React.js or Angular? Cycle.js?
Of course I know we can use either way. but I couldn't come up with idea where I would better use web components for.
Totally, web components is still in progress which has much of meaning. Idea of Micro Frontends is so sounds good to me. it's understandable. but I wasn's even satisfied about it as a reason of using web components. I want to know bunch of ideas from developers who like to use it.

Anyway, it's done. I might change composition of this My blog structure though, I wanna make efforts to keep writing my blog in here. haha

Thank you for reading this my first blog. cheer.

What Is The Render Props?

hiro@ — Sun, 18 Mar 2018 02:12:10 +0000

I guess you might have heard about Render Props because React team wrote a article in blog like this.

This is really helpful for me to understand how to use render props though, it might be a little bit hard for people to understand how to use it in depth.

So this time, I'm gonna describe how to use Render Props concisely.

Example Code which I will use for describing is here.

2 types of Render props APIs.

I think there are 2 types of APIs which you can use it as a render props.
First case is to use it as a props in props.
Take a look at example.

// src/containers/App/index.jsx

import React, { createContext } from 'react';
import List from '../../Components/List';

const App = () => (
  <List
    apiPath="//dog.ceo/api/breeds/list/all"
    render={
      ({list, isLoading}) => isLoading ? <div>now loading...</div> : <div>Done!</div>
    }/>
)

export default App;

So, as you can see you can use in props as a props.
Key point is here

render={
      ({list, isLoading}) => isLoading ? <div>now loading...</div> : <div>Done!</div>
    }

How do you use arguments like list and isLoading ? the answer is below!

// src/components/List/index.jsx
import React, { Component } from 'react';

export default class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      isLoading: false
    }
  }

  fetchApi = async () => {
    const res = await fetch(this.props.apiPath);
    const json = await res.json();

    await this.setState({
      list: json,
      isLoading: false,
    });
  }

  componentDidMount() {
    this.setState({ isLoading: true }, this.fetchApi);
  }

  render() {
    return this.props.render(this.state)
  }
}

Especially, this line.

  render() {
    return this.props.render(this.state)
  }

So, solution is easy, you need to add object as a arguments in this.props.render() in return method which is going to be returned.
You must be remember that list and isLoading arguments are state in List component.

if you add something key and property in state in List component, you can be used property as a argument from state.
of course, if state is changed, arguments params will be changed.

It's not necessary to add state object in this.props.render() function. but I think you would better add state. The more you use it as a render props component or utils, you would better do it.

this.props.children's case

On the other hand, you can make use of other type of render props by using this.props.children() !

Let's take a look at below's example.

// src/containers/ChildRender

import React, { Component } from 'react';
import Counter from '../../Components/Counter';

const ChildRender = () => (
  <Counter>
    {({count, increment, decrement, incrementAsync, incrementAsyncTen}) => (
      <section>
        <div>count: {count}</div>
        <button onClick={increment}>+</button>
        <button onClick={decrement}>-</button>
        <button onClick={incrementAsync}>incrementAsync</button>
        <button onClick={incrementAsyncTen}>incrementAsyncTen</button>
      </section>
    )}
  </Counter>
)

export default ChildRender;

You might understand what's going on.

I guess it's easy for you to take a look at code of Counter component.

// src/components/Counter

import React, { Component, cloneElement, Fragment } from 'react';

export default class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      increment: this.increment,
      decrement: this.decrement,
      incrementAsync: this.incrementAsync,
      incrementAsyncTen: this.incrementAsyncTen
    }
  }

  increment = () => {
    this.setState(state => ({count: ++state.count}))
  }

  decrement = () => {
    this.setState(state => ({count: --state.count}))
  }

  incrementAsyncTen = () => {
    setTimeout(
      () => this.setState(state => ({count: state.count + 10})), 
      1000
    )
  }

  incrementAsync = () => {
    setTimeout(
      () => this.setState(state => ({count: ++state.count})), 
      1000
    )
  }

  render() {
    const { children } = this.props;
    return children({...this.props, ...this.state})
  }
}

This is pretty easy to understand! and I think it looks similar with HOC Pattern.
You would prepare method which you make use of it as a argument from Counter component in Container or somewhere where you use it.

Finally, you need to render this.props.children() ! but, you need to add props and state or object which you want to add in argument!

Thats's it!

If you are interested in these example, again example is here.
please check it out!

Next time, I'm supposed to describe how to use portals API for React.js!

Thank you for reading! haaaaaaaaave a nice day!

Eslint trivial pitfall.

hiro@ — Mon, 12 Feb 2018 15:55:05 +0000

Hi! I'm hiro and I'm front-end developer but I'm really into server-side development by using Node.js recently by the way.

So, This is my first article. I'm gonna keep posting artile as a daily TIL to Dev.to regularly.
I don't know if it might be difficult though, it's good challenge for me to keep on posting it.

it's time to finish self-introduction! Let's get started today's topic!

Eslint trivial pithall.

I'm working two job, one is main job by using React.js partially (but It's not small range of area, it's getting expanded day by day). second is Togetter and using ReactNative. Common thing is using React ecosystem and modern environment.

Eslint is standard of linting library, isn't it? but I didn't even realize trivial pitfall.

When you specify your eslint, you might write this code to package.json inside of npm scripts.

"scripts": {
  "lint": "eslint src/js/* ",
}

I think this is correct. but what if you wanna dig deeper into making your directory hierarchy like below?

src/  
  js/  
    components/
      SomeComponents/
        index.jsx
        style.js
    index.js

First of all, you might write below code.

"scripts": {
  "lint": "eslint src/js/**/*.jsx src/js/**/*.js ",
}

This doesn't work well. but if you write eslint src/js/**/**/*.jsx src/js/**/**/*.js, it will work but if you dig deeper into making directory, you need to add more path location or add wild card like /**/.
And additionally, when you specify eslint src/js/*, it will be checked only *.js file. what if you wanna check even more *.jsx ?

Super Easy Solution.
you just need to add like below.

"scripts": {
  "lint": "eslint src/js/* --ext .js --ext .jsx ",
}

This will work as you expected! I've been fitted into a pitfall like this problem. I did't just realize eslint configuration though, but It's kind of tricky pithall.

Have a good your programming day!