Wie verwende ich Redux, wenn eine Stützfunktion den Zustand ändert?

Question

Ich versuche zu verstehen, wie man Redux in dem Fall verwendet, in dem eine Prop, die in eine Komponente übergeben wird, verwendet werden soll, um den Status der Anwendung zu ändern.

Ich habe ein funktionierendes Beispiel .

let Input = ({handleChange}) => (
    <input type="text" onChange={handleChange('mySpecialInput')} /> 
) 

let Text = ({message, color}) => (
    <span style={{color}}>{message}</span> 
) 

let App = ({message, color, handleChange}) => (
    <div> 
    <Text message={message} color={color} /> <br /> 
    <Input handleChange={handleChange} /> 
    </div> 
) 

class ConnectedApp extends React.Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     color: 'orange', 
     message: 'Hello World' 
    } 
    this.handleChange = this.handleChange.bind(this) 
    } 
    handleChange(id) { 
    return (event) => { 
     console.log(id) 
     if (id === 'mySpecialInput') { 
     this.setState({'color': event.target.value}) 
     } 
    } 
    } 
    render() { 
    return (
     <App 
     message={this.state.message} 
     color={this.state.color} 
     handleChange={this.handleChange} /> 
    ) 
    } 
} 

ReactDOM.render(
    <ConnectedApp/>, 
    document.getElementById('react_example') 
); 

Wie würde etwas so einfach mit redux arbeiten?

Answer 1

Hier ist der Code oben gebaut mit redux!

Working Example

let {createStore} = Redux 
let {connect, Provider} = ReactRedux 

// React component 
let Input = ({handleChange}) => (
    <input type="text" onChange={handleChange('mySpecialInput')} /> 
) 

let Text = ({message, color}) => (
    <span style={{color}}>{message}</span> 
) 

let App = ({message, color, handleChange}) => (
    <div> 
    <Text message={message} color={color} /> <br /> 
    <Input handleChange={handleChange} /> 
    </div> 
) 

// Action 

const CHANGE_COLOR = 'CHANGE_COLOR' 

function changeColorAction(color) { 
    return { 
    type: CHANGE_COLOR, 
    color 
    } 
} 

// Reducer 
function reducer(state = {color: "#ffa500"}, action) { 
    let count = state.count 
    switch (action.type) { 
    case CHANGE_COLOR: 
     return { color: action.color } 
    default: 
     return state 
    } 
} 

// Store 
let store = createStore(reducer) 

// Map Redux state to component props 
function mapStateToProps(state) { 
    return { 
    color: state.color, 
    message: "Hello World" 
    } 
} 

function changeColorDispatcher (dispatch) { 
    return (id) => { 
    return (event) => { 
     if (id === 'mySpecialInput') { 
     return dispatch(changeColorAction(event.target.value)) 
     } 
    } 
    } 
} 

// Map Redux actions to component props 
function mapDispatchToProps(dispatch) { 
    return { 
    handleChange: changeColorDispatcher(dispatch) 
    } 
} 

// Connected Component 
let ConnectedApp = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(App) 

ReactDOM.render(
    <Provider store={store}> 
    <ConnectedApp/> 
    </Provider>, 
    document.getElementById('react_example') 
); 

Answer 2

Sie können einfach jede Ihrer Komponenten einzeln verbinden statt mit connect() auf dem Top-Level-Komponente und vorbei an den Stützen in der Hierarchie Baum.

Dies wird viel praktischer.
See a working example!