Question

我努力抓住Redux的全部力量。我不觉得这应该是这么复杂。我有一个聪明的＆＃34;父组件有这样的东西 -

Players.js

class Players extends Component {
state = {
players: this.props.players,
playerToEdit: null
};

componentWillReceiveProps(nextProps) {
const players = nextProps.players;
this.setState({
  players: nextProps.players
});
}

 getPhotos = avatar => {
this.setState({ avatar: avatar });
this.setState({ cameraMode: this.state.cameraMode ? false : true });
};

editPlayer = player => {
this.setState({
  playerToEdit: player
});
};

cancelPlayerEdit = () => {
this.setState({
  playerToEdit: null
});
};

dispatchUpdatedPlayer = updatedPlayer => {
this.props.dispatch(updatePlayerInfo(updatedPlayer));
this.setState({
  playerToEdit: null
});
};

render() {
const { hasCameraPermission } = this.state;
let players = this.state.players;
let { playerToEdit } = this.state;

players = players.sort(function(a, b) {
  let nameA = a.name.toLowerCase(),
    nameB = b.name.toLowerCase();
  if (nameA < nameB) return -1;
  if (nameA > nameB) return 1;
  return 0;
});

let cameraComponent = null;
if (true) {
  cameraComponent = (
    <ThisCamera id={this.state.playerId} onRefresh={this.getPhotos} />
  );
}

let playerScreen = null;
if (playerToEdit) {
  playerScreen = (
    <PlayerProfileScreen
      player={playerToEdit}
      onCancel={this.cancelPlayerEdit}
      onUpdate={this.dispatchUpdatedPlayer}
    />
  );
}

return (
  <View>
    <View style={styles.playerCards}>
      {players.map((player, key) => (
        <PlayerCard key={key} player={player} onPress={this.editPlayer} />
      ))}
    </View>
    {playerScreen}
  </View>
);
 }
 }


function mapStateToProps(state) {
const players = state.players;
players.map((player, key) => 
 return {
  players: players
 };
  }

export default connect(mapStateToProps)(Players);

和一个看起来有点像这样的子组件 -

class PlayerCard extends Component {
state = {
player: this.props.player,
onPress: this.props.onPress
};

componentWillReceiveProps(nextProps) {
const player = nextProps.player;

this.setState({
  player: player
});
}

  press = () => {
  this.state.onPress(this.state.player);
};

render() {
const { player } = this.state;
return (
  <View style={styles.card}>
    <TouchableOpacity onPress={this.press}>
      <View style={styles.avatarWrapper}>
        <Image
          style={styles.avatar}
          source={{
            uri:
              SERVER_ROOT_URL +
              "/avatar/" +
              player.id +
              "?" +
              `${new Date()}`
          }}
        />
      </View>
      <View style={styles.info}>
        <View>
          <Text style={styles.name}>{player.name}</Text>
        </View>
        <View>
          <Text style={styles.teams}>
            {this.state.displayedOrgUnit !== null
              ? player.orgUnits.map(it => it.name).join(", ")
              : ""}
          </Text>
        </View>
      </View>
    </TouchableOpacity>
  </View>
);
}
}

我觉得我必须派遣行动并使用生命周期方法。是因为我正在调用父母中定义的方法吗？我觉得我并没有尽最大努力使用Redux。有什么帮助吗？

Answer 1

商店的想法是容纳“容器”（与商店直接连接的组件）的状态，或者更确切地说，是整个应用程序的所有容器。普通的旧反应组件（子）应该从其道具中接收所有信息。当我处理redux时，我很少会使用组件的状态。我认为我使用组件状态的唯一一次是当我填写表单时我不想在商店中保留临时信息，但是甚至可能有更好的方法来做到这一点。

将孩子需要呈现的信息传递给您已经在做的孩子的道具可能是有意义的。但是，没有理由将其存储到玩家的状态中。如果玩家被保留在商店中，并且商店发生变化，那么它也会重新渲染孩子。 onPress的动作也是如此。孩子可以访问它自己的属性，所以再次，没有必要将它添加到它的状态。实际上，孩子不需要存储任何状态。如果父级更改子级的属性，则子级将更新。这当然也消除了在这里使用孩子的生命周期功能的需要。

将动作传递给孩子来调用也绝对没有错。

除了mapStateToProps之外，我还会考虑使用mapDispatchToProps，然后你可以用“this.props.ActionName”调用你的所有动作

const mapDispatchToProps = dispatch => {
  return {
    updatePlayer: updatedPlayer => {
      updatePlayerInfo(updatedPlayer);
    },

  };
};

function mapStateToProps(state) {
const players = state.players;
players.map((player, key) => 
 return {
  players: players
 };
  }

export default connect(mapStateToProps, mapDispatchToProps)(Players);

清理代码并完成相同的工作。当然这只是意见......

如果你正在寻找一个关于redux的良好入门以及如何使用它......

https://egghead.io/instructors/dan-abramov

这里有一些来自redux之父的视频教程。

redux中的一些其他强大机制是调用reducers（reducerComposition）的reducers，或者可以调用多个reducers的单个动作，或者你可以定义单个动作并从任何容器调用它的事实（代码中的Modularity））。这些是生命周期功能无法完成的事情......至少不容易。

从子组件更新redux的最佳方法是什么？

1 个答案: