Получение состояния Redux, но также изменение другого состояния Redux в том же компоненте React Native? - PullRequest
0 голосов
/ 06 июня 2018

У меня есть компонент React, который в настоящее время просто получает состояние из Redux.Вот общая схема:

const mapStateToProps = state => {
     return { stuff: state.stuff };
};

class MyComponent extends React.Component {
    // use 'stuff' from redux to build the Views
}

export default connect(mapStateToProps)(MyComponent);

Но что теперь, если я хочу добавить кнопку, которая изменяет другое состояние Redux под названием other?

Чтобы сохранить новое состояние Redux, язнаю, что мы должны создать отправку к действию.то есть,

const mapDispatchToProps = dispatch => {
....
};

Затем, наконец, соедините их:

connect(null, mapDispatchToProps)(MyComponent);

Но моя путаница заключается в том, что если я уже соединяюсь с mapStateToProps, как я могу также сопоставить его с mapDispatchToProps такчто я могу обновить состояние Redux в том же компоненте?

Ответы [ 2 ]

0 голосов
/ 06 июня 2018

Хм, похоже, я спросил слишком рано.Я немного прочитал, и параметры в connect() на самом деле принимают оба.

Вот так:

connect(mapStateToProps, mapDispatchToProps)(MyComponent)
0 голосов
/ 06 июня 2018

Вы можете использовать оба; -)

Например:

Action.js

export const textChanged = (newText) => {
    return { type: "TEXT_CHANGED", newText }
};

HomeScene.js:

import { textChanged } from "../actions;

...

render () {
    const { myText } = this.props;

    <TextInput 
     value={myText}
     onChangeText={(newText) => this.props.textChanged(newText)}
    />
}

function mapStateToProps(state) {
    return {
        myText: state.appContent.myText
    };
}

export default connect(mapStateToProps, { textChanged })(HomeScene);

Reducer.js

case "TEXT_CHANGED":
        return {
            ...state,
            myText: action.newText
        };

Надеюсь, это поможет!

...