mapStateToPropsを使用して動的ルートパラメータに基づいてコンポーネントをレンダリングし、

Question

roomsのデータをグローバルアプリケーションコンテナに格納しています。 roomDetailsというサブコンテナがあり、これは再選択セレクタを使用して、グローバル状態から部屋をownProps.params.slugで選択します。これは、mapStateToPropsを使用して行われます。

rooms/roomid1

rooms/roomid2

に部品部屋の小道具が更新されていません。

私の問題は、私はからのルートのparams（rooms/:roomId）を変更したときということです。

私はリンクを使用してルートを変更しています：

<Link to={"/room/roomid1"} key={"room-roomid1"}>room 1</Link>

にはどうすればルートが変更されたときのparamsグローバル部屋の状態から部屋を再選択するために、コンポーネントのroom小道具を得ることができますか？

部屋の小道具は、最初のページの読み込み時と同じように読み込まれます。または、私が動的なルートの外にあるルートに行き、その後戻ってきます。コンポーネントのプロパティ（ルートパラメータ）のみが変更されている同じ動的ルートを切り替えると、これらのコンポーネントは正しく読み込まれません。

RoomDetails/index.js

const mapStateToProps = (state, ownProps) => { 
    return createStructuredSelector({ 
    room: selectRoom(ownProps.params.roomId), 
    }); 
} 

...

render() { 
    let roomContent = null; 
    if (this.props.room) { 
     roomContent = (
     <div> 
      {this.props.room.get('name')} 
     </div> 
    ); 
    } 
    return (
     <div> 
     {roomContent} 
     </div> 
    ); 
    } 

selectors.js

import { createSelector } from 'reselect'; 

const selectGlobal =() => (state) => state.get('global'); 

const selectRooms =() => createSelector(
    selectGlobal(), 
    (globalState) => globalState.get('rooms') 
); 

const selectRoom = (roomId) => createSelector(
    selectRooms(), 
    (roomsState) => roomsState && roomsState.get(roomId) 
); 

Answer 1

再選択のみに渡されるどんな変数に対応させていただきます 最初の議題t。したがって、そのルートが変更されるたびに、ある変数を更新する必要があります。

• は、そのルートで実装された部品にお店でroomIdを更新イベントを送出react-router-reduxを実装して、あなたのセレクタでそれに応じる：頭に浮かぶ2つのオプションがあります。

2番目のオプションは、次のようになります。このコンポーネントはルート/rooms/:roomIdに装着されていることを言う：

class Rooms extends Component { 
    changeRoom = (roomId = this.props.roomId) => this.props.setRoom(roomId); 

    componentDidMount() { 
    this.changeRoom(); 
    } 

    componentWillReceiveProps(nextProps) { 
    if (this.props.roomId !== nextProps.roomId) { 
     this.changeRoom(nextProps.roomId); 
    } 
    } 
} 

これはstate.room.selectedを更新することを言います。あなたはあなたのセレクターでそれを指定することができます。

import { createSelector } from 'reselect'; 

const getRooms = state => state.rooms.data; 
const getSelected = state => state.rooms.selected; 

export const getCurrentRoom = createSelector(
    [ getRooms, getSelected ], 
    (rooms, selected) => rooms.find(room.id === selected) 
) 

Answer 2

私はselectRoomからのparamsを削除し、へmapStateToPropsを変更：私はまだない

const selectGlobal =() => (state) => state.get('global'); 

const selectedRoom =() => (state, props) => props && props.params.roomId; 

const selectRooms =() => createSelector(
    selectGlobal(), 
    (globalState) => globalState.get('rooms') 
); 

const selectRoom =() => createSelector(
    selectRooms(), 
    selectedRoom(), 
    (roomsState, roomId) => roomsState.get(roomId) 
); 

...私は、このようなセレクタを更新し、それが働いている

const mapStateToProps = createStructuredSelector({ 
    room: selectRoom(), 
}); 

props.params.roomIdをセレクタに渡すときにセレクタが呼び出されなかった理由を理解してください。

selectRooms()に引数がないので、常に呼び出されますか？