タグ別アーカイブ: 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されたことを告げています

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

続きはまた書きます


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

ここを参考に

ではーー

【Redux】「bindActionCreators」とは。使い方 Reduxドキュメント日本語訳

ReduxドキュメントのbindActionCreators

======================

bindActionCreators(actionCreators, dispatch)

同じキーを持つオブジェクトに、
その値をActionCreatorであるオブジェクトにして、
dispatchにラップされたすべてのActionCreatorを呼ぶので、
それらは直接実行できるようになります

通常はStoreインスタンス上のdispatchを直接呼ばなくてはなりません。
もしあなたがReactと一緒にReduxを使うなら、
それを直接呼べるようにreact-deduxもdispatch関数を提供します。

bindActionCreatorに対してのみの使用は、
Reduxが気づかない下のコンポーネントに多くのaction creatorを渡したい時や、
dispatchに渡したくない時、
Reduxがそれに対してstoreする時です。

便利なことに第一引数として一つの関数を渡すこともできますし、
返り値で関数を得られることもできます

Parameters

1. actionCreators (Function or Object)
返り値: An action creator, か action creatorを値に持つobject

2. dispatch (Function) : Storeインスタンス上で利用可能なdispatch関数

Returns

(関数かオブジェクト): 元のオブジェクトを模倣したオブジェクトで、対応するaction creatoreが返したactionを各関数がただちにdispatchingする

もしactionCreatorsとしての関数を渡したら、
一つの関数にもなる値を返します

Example

TodoActionCreators.js

export function addTodo(text) {
  return {
    type: 'ADD_TODO',
    text
  }
}

export function removeTodo(id) {
  return {
    type: 'REMOVE_TODO',
    id
  }
}

SomeComponent.js

import { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

import * as TodoActionCreators from './TodoActionCreators'
console.log(TodoActionCreators)
// {
//   addTodo: Function,
//   removeTodo: Function
// }

class TodoListContainer extends Component {
  componentDidMount() {
    // Injected by react-redux:
    let { dispatch } = this.props

    // Note: これは動きません:
    // TodoActionCreators.addTodo('Use Redux')

	//あなたはただactionを作成する関数を呼んでいるだけです
	//actionをdispatchもしなくてはいけません

    // これは動きます
    let action = TodoActionCreators.addTodo('Use Redux')
    dispatch(action)
  }

  render() {
    // Injected by react-redux:
    let { todos, dispatch } = this.props

    //これはbindActionCreatorsの良いユースケースです
   // あなたはReduxが子コンポーネントを全く知らないようにしたいです。

    let boundActionCreators = bindActionCreators(TodoActionCreators, dispatch)
    console.log(boundActionCreators)
    // {
    //   addTodo: Function,
    //   removeTodo: Function
    // }

    return (
      <TodoList todos={todos}
                {...boundActionCreators} />
    )

    // bindActionCreatorsの代りに渡すことです
    // ただ子コンポーネントにdispatch関数を渡すだけです。
	//action creatorsをimport、それらについて知っている必要がある

    // return <TodoList todos={todos} dispatch={dispatch} />
  }
}

export default connect(
  state => ({ todos: state.todos })
)(TodoListContainer)

Tips

・あなたは尋ねるかもしれない: どうして昔のFluxのようにaction creatorsをすぐにstorインスタンスに対してbindするの?
この問題はサーバー上でレンダーする必要があるAppでよく動かないためです。
ほとんどの場合、別のデータを準備することができるので、あなたはリクエスト毎に分けたStoreインスタンスを持ちたいでしょう。
でもそれは定義中にaction creatorsをバインドすることで、
すべてのリクエストに対して一つのstoreインスタンスで詰まってしまうことを意味します。

・もしES5を使うなら、 import * as 構文の代わりに require(‘./TodoActionCreators’) を 第一引数としてbindActionCreatorsへ渡すことだけです。
それに対して気をつけることは actionCreators引数の値は関数ということだけです。
モジュールシステムは重要ではありません。

【React/Redux】このアラートが出てきたらすること/warning.js:36 Warning: validateDOMNesting(…): <div> cannot appear as a descendant of <p>. See Counter > p > … > div.

React x Reduxを使っていて、
下記のようなものがコンソールに出てきたら、

【React/Redux】このアラートが出てきたらすること/warning.js:36 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. See Counter > p > ... > div.

【React/Redux】このアラートが出てきたらすること/warning.js:36 Warning: validateDOMNesting(…): <div> cannot appear as a descendant of <p>. See Counter > p > … > div.

したのようにpで返している箇所ありませんか??

【React/Redux】このアラートが出てきたらすること/warning.js:36 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. See Counter > p > ... > div.

【React/Redux】このアラートが出てきたらすること/warning.js:36 Warning: validateDOMNesting(…): <div> cannot appear as a descendant of <p>. See Counter > p > … > div.

ブロック要素が必要ならdivにしてください。
お願いします。

【関連記事】
【React】Reactの動きを理解したい人の為の最小サンプル

【React入門】過去のREACT初心者の自分にpropsとstateの違いを簡単に説明してあげたい

【React × ECMAScript2015 × Flux】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるカウンター】

React × Flux × ECMAScript2015 LINE風チャット

他のReact記事

フロントエンド記事

GitHub

qiita

【React/Redux】Propsがread-onlyでEmpty Object。。connectとか疑った後,Container内のComponentが何も返してくれない時

エラーにもならないで、静かに訴えています。。

【React/Redux】Propsがread-onlyでEmpty Object。。connectとか疑った後,Container内のComponentが何も返してくれない時

【React/Redux】Propsがread-onlyでEmpty Object。。connectとか疑った後,Container内のComponentが何も返してくれない時

写真のようにaddOnで見ると、、Propsがread-onlyでEmpty Object。。connectとか疑った後,Container内のComponentが何も返してくれない時

【React/Redux】Propsがread-onlyでEmpty Object。。connectとか疑った後,Container内のComponentが何も返してくれない時

【React/Redux】Propsがread-onlyでEmpty Object。。connectとか疑った後,Container内のComponentが何も返してくれない時

コンポーネントの最初の文字が小文字だった。。

ではーーーー

【Redux】これハマった。。invariant.js:38 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

ヒントもうちょっと欲しい。。って思いながら、、ハマった箇所。

2つの可能性があります。
①export, importを間違えている可能性
②setState内の記述が誤っている可能性
例えば
this.setState({
value: this.state – 1;
})
こう書いちゃっているとか
正しくは、、
this.setState({
value: this.state – 1
})

今回は①の場合、、

【Redux】これハマった。。invariant.js:38 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

【Redux】これハマった。。invariant.js:38 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

componentはElementを返さなくてはいけませんよっ、ただundefinedですよ。
っていうことだと思うので、ひたすらContainerやComponentのrenderがreturnしているか
をチェックした。

react-reduxからimportにしてないケース

【Redux】これハマった。。invariant.js:38 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

【Redux】これハマった。。invariant.js:38 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

 

外部に公開していないケース

app_js_-_react-sample_-____react-sample_

 

ではーーーー