Reduxのレデューサは...初期状態

Question

私はReduxのに新たなんだと私は単一の値を更新クレイジー取得していますを更新しない

は私のアプリは、ジオロケーションを実行開始すると、それが行われたときに、私は私のアクションを呼び出しますジオコードの状態を更新する：

処置：

export const UPDATE_LOCATION = 'UPDATE_LOCATION'; 

export function updateLocation(location) { 
    return { 
    type: UPDATE_LOCATION, 
    payload: location 
    }; 
}; 

リデューサー：

import { UPDATE_LOCATION } from '../actions'; 

const initialState = { 
    location: { 
    latitude: '51.509865', 
    longitude: '-0.118092' 
    } 
}; 

export default function(state = initialState, action) { 
    switch (action.type) { 
    case UPDATE_LOCATION: 
     return Object.assign({}, state, { 
     location: action.payload 
     }); 
    default: 
     return state; 
    } 
} 

Basicall私のアプリではthis.props.location.latitudeを取得しようとすると、更新されても、私はまだinitialStateに設定された値を参照してください。

コンポーネント：

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 

class Demo extends Component { 
    constructor(props) { 
    super(props); 

    // never updated by Redux... 
    console.log(props.location.latitude); 
    } 

    render() { 
    return (
     <div> 
     ... 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
    location: state.location.location // I don't know why location is set twice... 
    }; 
} 

export default connect(mapStateToProps)(Demo); 

異なるコンポーネントでthis.props.updateLocation(data)実行し、私は減速に正しいデータを参照することができるよ...

あなたは私のために光に切り替えることはできますか？ありがとう

Answer 1

私はそれがstate.location.locationの代わりにstate.locationをつかまえるべきであるようにmapStateToPropsが本当にこの単純なことを望んでいます。

また、console.logはコンストラクタにあります。したがって、それは一度だけ呼び出され、以降の更新後には呼び出されません。さらなるデバッグが必要な場合は、デモコンポーネントのcomponentWillReceiveProps()にロガーを追加してみます。