タグ別アーカイブ: React

GWお勉強ブログ:1 [React Hooksの動きを理解する]

改めて動きを理解するためのコードを
書いてみました。

ページリロードしてここを押して見てください。
1

1
false
App render
Hello render
Hello Effect
App Effect

こうなっているかと思います。

まずuseStateで与えられたstateが参照されて
1
false
一番親の
Appが
App render
を出力
その後
子供の
Hello render

Hellow Effectは
omponentDidMountされたことを告げ
親が
App Effect
omponentDidMountされたことを告げています

ここまでがページリロード時の処理です

続きはまた書きます


「武骨日記の」プライバシーポリシーに関して
プライバシーポリシー

株式会社TerraceTechについて
最近起業しました。
株式会社TerraceTech

SNS
インド旅 instagram
適当な日常写真 instagram
シュールさーん instagram
シュールさーん LINEスタンプ
もりたけんじTwitter
ネタ帳Twitter
note

FaceBook -kennji.morita-

わたしが結成しているWebチームではWeb未経験者、フリーランスの方へのお仕事を紹介しています。
また個人レッスンしてほしい生徒も募集中です。
もしご興味ある方はチャットからご連絡ください。

※業務連絡やお久しぶり連絡もチャットからお願いします。

【react-router-redux】エラーを解決:sync.js:39 Uncaught Error: Expected the routing state to be available either as `state.routing` or as the custom expression you can specify as `selectLocationState` in the `syncHistoryWithStore()` options. Ensure you have added the `routerReducer` to your store’s reducers via `combineReducers` or whatever method you use to isolate your reducers.

【react-router-redux】エラーを解決:routing state to be available either as `state.routing` or as the custom expression you can specify as selectLocationState。。。

【react-router-redux】エラーを解決:routing state to be available either as `state.routing` or as the custom expression you can specify as selectLocationState。。。

 

state.routingか、もしくはsyncHistoryWithStore()オプション内のselectLocationStateとして指定できるカスタム式として利用可能なrouting state を期待している

reducersを分離するために使うメソッドがなにか、もしくは、combineReducersを通じてstoreのreducersにrouterReducerが追加されたか確認してください。

自分の場合
上記の
「the routing state to be available either as `state.routing`」
ができていないくて、

reducerをまとめるjs内で、
下記のようになっていた。

reducers/index.js

import { combineReducers } from 'redux'
import  counter from './counterReducer'
import input from './inputReducer'
import { routerReducer } from 'react-router-redux'

export const appReducer = combineReducers({
    counter: counter,
    input: input,
    router : routerReducer //ここ
})
export default appReducer

store.routingとなるには
routeをroutingに修正

import { combineReducers } from 'redux'
import  counter from './counterReducer'
import input from './inputReducer'
import { routerReducer } from 'react-router-redux'

export const appReducer = combineReducers({
    counter: counter,
    input: input,
    routing: routerReducer //routingに修正
})
export default appReducer

ここを参考に

ではーー