reduxを使用して複数のプラットフォームを選択

Question

今は1つのプラットフォームしか選択できませんでしたが、どのように複数のプラットフォームを選択できますか。私はプラットフォームの配列を使用してみましたが、それは動作しませんでした。そうすれば、クリックしたときに1つのプラットフォームでも選択されません。ここで

iは、配列を使用するために

const socialPlatforms = [ 
    { name: 'facebook', fontName: 'facebook-square', icon: 'facebook-icon' }, 
    { name: 'twitter', fontName: 'twitter-square', icon: 'twitter-icon' }, 
    { name: 'instagram', fontName: 'instagram', icon: 'instagram-icon' }, 
]; 

const mapDispatchToProps = (dispatch) => (
    { 
    handleSubscription: (subscription) => dispatch(subscriptionHandled(subscription)), 
    selectPlatform: (platform) => dispatch(addPlatform(platform)), 
    } 
); 

function mapStateToProps(state) { 
    return { 
    settings: state.settings, 
    }; 
} 

class Settings extends React.PureComponent { 

    addPlatform = (...platform) => { 
    this.props.selectPlatform(platform); 
    } 

    render() { 
    const { settings } = this.props; 
    const socialPlatform = socialPlatforms.map((platform, index) => 
     <FontAwesome 
     name={platform.fontName} 
     key={index} 
     className={`icon-pointer font-awesome-icons ${settings.platform === platform.name ? platform.icon : ''}`} 
     size="5x" 
     onClick={() => { this.addPlatform(platform.name); }} 
     /> 
    ); 
    return (
     <div> 
     <h1>Settings Page</h1> 
     <Container> 
      <Row> 
      <Col xs={12}> 
       {socialPlatform} 
      </Col> 
      </Row> 
     </Container> 
     </div> 
    ); 
    } 
} 

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



const initialState = { 
    platform: [], 
}; 

export default(state = initialState, action) => { 
    switch (action.type) { 
    case ADD_PLATFORM: 
     return { ...state, platform: action.platform }; 
    default: 
     return state; 
    } 
}; 

Answer 1

をやっていることで、あなたは、このような方法で、減速ロジックを変更する必要がありますする必要があります。

const initialState = { 
 
    platforms: [], 
 
}; 
 

 
export default(state = initialState, action) => { 
 
    switch (action.type) { 
 
     case ADD_PLATFORM: 
 
      const index = state.platforms.indexOf(action.platform); 
 
      if (index === -1) { 
 
       return { 
 
        ...state, 
 
        platforms: [...state.platforms, action.platform] 
 
       }; 
 
      } else { 
 
       return { 
 
        ...state, 
 
        platforms: state.platforms.filter(
 
         localIndex => localIndex !== index 
 
        ) 
 
       }; 
 
      } 
 

 
     default: 
 
      return state; 
 
    } 
 
};

次に、あなたのclassNameの計算は次のようになります：

className={`icon-pointer font-awesome-icons ${settings.platforms.indexOf(platform.name) === -1 ? '' : platform.icon}`}