質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

10607閲覧

Reducerでstateの更新ができたのに描画処理がされない

退会済みユーザー

退会済みユーザー

総合スコア0

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

1クリップ

投稿2017/01/06 11:29

編集2017/01/06 11:33

Reduxで、初回の描画はうまくいくのですが、
その後ユーザのアクションによるstateの更新➞描画上手く行きません。
Reducerのconsole.logにはstateの更新が確認できるのですが・・。

actionCreatorでイベントを受け付け、
そこからReducerでstoreの更新をすることで、
Reducerから発行されているstateを使用しているd
Componentが再レンダリングされる認識なんですが間違っていますか(^_^;)??

javascript

1/** container **/ 2import React from 'react' 3import {connect} from 'react-redux' 4import { bindActionCreators } from 'redux' 5import * as Actions from '../actionCreators/todoActions' 6import todoApp from '../components/todoApp/TodoApp' 7function mapStateToProps(state) { 8 console.log(state) // 更新出来ている 9 return state.todoApp 10} 11function mapDispatchToProps(dispatch) { 12 return { 13 actions:bindActionCreators(Actions, dispatch) 14 } 15} 16export default connect(mapStateToProps,mapDispatchToProps)(todoApp)

javascript

1/** Reducer **/ 2const initialState = { 3 todos: [ 4 { 5 id: 1, 6 title: "Default Title", 7 description: "Default Description", 8 status: 0 // 0:未実施 1:実施中 2:完了 9 } 10 ] 11} 12 13export default function todoApp(state = initialState, action) { 14 switch (action.type) { 15 case 'ADD_TODO': 16 var array = state.todos 17 array.push({ 18 id: action.id, 19 title: action.title, 20 description: action.description, 21 status:0 22 }) 23 return Object.assign({}, state, { 24 todos: array 25 }) 26 case .... 27 } 28}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

mapStateToPropsでの戻り値が正しくないからだと思われます。

mapStateToPropsではRecatコンポーネントにプロパティとして渡すObjectを返す必要があります。

JavaScript

1function mapStateToProps(state) { 2 return { 3 hoge: 1, 4 fuga: "abc" 5 }; 6}

とした場合、Reactコンポーネント側で

JavaScript

1class Hoge extends React.Component { 2 render() { 3 return ( 4 <ul> 5 <li>{this.props.hoge}</li> 6 <li>{this.props.fuga}</li> 7 </ul> 8 ); 9 } 10}

とすると

HTML

1<ul> 2 <li>1</li> 3 <li>abc</li> 4</ul>

という形になります。

質問のコードではreturn state.todoAppとしていますが、そもそもstatetodoAppのキーが無いため、undefinedが返るだけでプロパティには何も返りません。stateがそのまま渡してthis.props.todosとして受け取りのであれば、return state;とすればいいでしょう。その他のプロパティ名で受け取りたいのであれば、Objectを作る形で渡すようにしてください。

投稿2017/01/14 09:13

raccy

総合スコア21733

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問