0

roomsグローバルアプリコンテナにさまざまなデータを保存しています。roomDetailsを使用してグローバル状態から部屋を選択するために再選択セレクターを使用するというサブコンテナーがありますownProps.params.slug。これは、mapStateToProps を使用して行われます。

私の問題は、ルート パラメータ ( rooms/:roomId) を次のように変更したときです。

rooms/roomid1

に

rooms/roomid2

コンポーネント ルームの小道具が更新されていません。

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

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

roomルート パラメータが変更されたときに、コンポーネントの propsを取得して、グローバル ルームの状態からルームを再選択するにはどうすればよいですか?

部屋の小道具は、最初のページの読み込み時、または動的ルートの外側にあるルートに移動してから戻る場合に、必要に応じて読み込まれることに注意してください。コンポーネントのプロパティ (ルート パラメーター) のみが変更される同じ動的ルート間で切り替えると、それらは正しく読み込まれません。

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)
);
4

2 に答える 2

0

再選択は、最初の引数に渡された変数にのみ応答します。したがって、そのルートが変更されるたびに、変数を更新する必要があります。思いつくのは次の 2 つのオプションです。

  • react-router-reduxを実装し、セレクターで応答します

  • roomIdそのルートにマウントされたコンポーネントのストア内を更新するイベントをディスパッチします。

2 番目のオプションでは、次のようにします。このコンポーネントが route にマウントされているとします/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)
)
于 2017-01-10T16:12:07.973 に答える
0

パラメータを削除して次のようselectRoomに変更mapStateToPropsしました。

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

次に、このようにセレクターを更新しましたが、機能しています...

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)
);

セレクターに渡したときにセレクターが呼び出されなかった理由はまだわかりませんprops.params.roomId...

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

于 2017-01-10T18:41:53.900 に答える