「React.js」カテゴリーアーカイブ
【React / Sidebar】解決!「Warning: Unknown prop `onTouchTap` on tag. Remove」
【react-router-redux】これが出てきたら:<IndexRoute> should not have a "path" prop in IndexRoute
【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.
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
[code language="javascript"]
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
[/code]
store.routingとなるには
routeをroutingに修正
[code language="javascript"]
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
[/code]
ここを参考に
ではーー
【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
[code language="javascript"]
export function addTodo(text) {
return {
type: 'ADD_TODO',
text
}
}
export function removeTodo(id) {
return {
type: 'REMOVE_TODO',
id
}
}
[/code]
SomeComponent.js
[code language="javascript"]
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)
[/code]
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を使っていて、
下記のようなものがコンソールに出てきたら、
したのようにpで返している箇所ありませんか??
ブロック要素が必要ならdivにしてください。
お願いします。
【関連記事】
【React】Reactの動きを理解したい人の為の最小サンプル
【React入門】過去のREACT初心者の自分にpropsとstateの違いを簡単に説明してあげたい
【React × ECMAScript2015 × Flux】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるカウンター】
【React/Redux】Propsがread-onlyでEmpty Object。。connectとか疑った後,Container内のComponentが何も返してくれない時
エラーにもならないで、静かに訴えています。。
写真のようにaddOnで見ると、、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
})
今回は①の場合、、
componentはElementを返さなくてはいけませんよっ、ただundefinedですよ。
っていうことだと思うので、ひたすらContainerやComponentのrenderがreturnしているか
をチェックした。
react-reduxからimportにしてないケース
外部に公開していないケース
ではーーーー
【Redux】Uncaught Error: Objects are not valid as a React child (found: object with keys {counterReducer, inputReducer}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `Component`.(…)
値の型が違う風に渡ってきている。該当の`Component`のrenderメソッド内を確認してみて!
render関数のなかでreturnする前にconsole.log()でそのなかで使っている変数調べたら
propTypesでnumberにしていたのにObjectが渡ってきたよ。
みてみると
【react-router-redux】これが出てきたら:<IndexRoute> should not have a "path" prop in IndexRoute
【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.
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
[code language="javascript"]
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
[/code]
store.routingとなるには
routeをroutingに修正
[code language="javascript"]
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
[/code]
ここを参考に
ではーー
【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
[code language="javascript"]
export function addTodo(text) {
return {
type: 'ADD_TODO',
text
}
}
export function removeTodo(id) {
return {
type: 'REMOVE_TODO',
id
}
}
[/code]
SomeComponent.js
[code language="javascript"]
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)
[/code]
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を使っていて、
下記のようなものがコンソールに出てきたら、
したのようにpで返している箇所ありませんか??
ブロック要素が必要ならdivにしてください。
お願いします。
【関連記事】
【React】Reactの動きを理解したい人の為の最小サンプル
【React入門】過去のREACT初心者の自分にpropsとstateの違いを簡単に説明してあげたい
【React × ECMAScript2015 × Flux】を手っ取り早く学びたい人の為にサンプル作ったよ【3の倍数と3が付くときだけ猫になるカウンター】
【React/Redux】Propsがread-onlyでEmpty Object。。connectとか疑った後,Container内のComponentが何も返してくれない時
エラーにもならないで、静かに訴えています。。
写真のようにaddOnで見ると、、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
})
今回は①の場合、、
componentはElementを返さなくてはいけませんよっ、ただundefinedですよ。
っていうことだと思うので、ひたすらContainerやComponentのrenderがreturnしているか
をチェックした。
react-reduxからimportにしてないケース
外部に公開していないケース
ではーーーー
【Redux】Uncaught Error: Objects are not valid as a React child (found: object with keys {counterReducer, inputReducer}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `Component`.(…)
値の型が違う風に渡ってきている。該当の`Component`のrenderメソッド内を確認してみて!
render関数のなかでreturnする前にconsole.log()でそのなかで使っている変数調べたら
propTypesでnumberにしていたのにObjectが渡ってきたよ。
みてみると