hello мировой редуктор для реакции/redux

Question

Есть несколько других вопросов, связанных с миром в мире, в отношении реагирования, но мой характерен для редуктора. Я не совсем уверен, что я должен был внести в редуктор для моего конкретного действия.

Примечание *: Я думал, что, может быть, мне нужно, чтобы добавить сообщение: «» пару ключей значение для моего начального состояния, а затем объявить

var newState = Object.assign({}, state, { 
     message:"hello world" 
    }); 

в мой если заявление в редукторе, а затем направить его в но это кажется ненужным, так как он всегда должен печатать привет мир, поэтому жесткое кодирование кажется более эффективным. Надеюсь, в этом вопросе не слишком много помех.

Вот мой компонент:

var HelloWorld = React.createClass({ 
    helloWorld: function() { 
    this.props.dispatch(actions.printHello()); 
    }, 
    render: function() { 
    return (
     <div className="HelloWorld"> 
     <h1>Hello World!</h1> 
     </div> 
    ); 
    } 
}); 

var Container = connect()(HelloWorld); 

module.exports = Container; 

мои действия:

var $ = require("jquery") 

var PRINT_HELLO = 'PRINT_HELLO'; 
var printHello = function() { 
    return { 
     type: GUESS_NUM 
    }; 
}; 

exports.PRINT_HELLO = PRINT_HELLO; 
exports.printHello = printHello; 

и редуктор:

var actions = require('./actions'); 

var initialRepositoryState = { 
    type: null 
}; 

var capstoneApp = function (state,action) { 
    state = state || initialRepositoryState; 


    if (action.type === actions.PRINT_HELLO) { 
    var newState = Object.assign({}, state, { 
     message:"hello world" 
    }); 
    return newState; 
    } 
}; 

Я не думаю, что вам нужен мой index.js но я при необходимости обеспечит. Заранее благодарим за ввод!

Answer 1

Редуктор держит ваше состояние. Таким образом, способ думать об этом - «каковы части моей программы, которые могут измениться?» И затем оттуда, следующий вопрос: «Какое минимальное количество состояний требуется для моей программы?»

От взгляда на ваш пример, создается впечатление, что вы пытаетесь создать приложение, которое иногда отображает «привет мир» в пользовательском интерфейсе. Позвольте мне сделать еще несколько взаимодействий, чтобы помочь описать все фигуры.

Вначале я помогу вам создать программу с пустой меткой и кнопкой. Когда вы нажмете на кнопку, отобразится «hello world».

Хорошо, поэтому, чтобы ответить на первый вопрос: что может измениться? Приложение может отображать «привет мир» или ничего. Мы могли бы сохранить это несколькими способами. Если строка жестко закодирована, как вы уже упомянули выше, то действительно у вас есть сообщение bool, показывающее сообщение, или нет.

И на второй вопрос: одно истинное значение в значительной степени является определением минимального состояния. Так давайте редуктор:

var initialState = { 
    showMessage: false, 
}; 

var reducer = function(state, action) { 
    var newState = Object.assign({}, state); 
    if (action.type === 'BUTTON_PRESS') { 
     newState.showMessage = !newState.showMessage; 
    } 
    return newState; 
} 

Итак, теперь мы создали редуктор, что, когда он получает действие BUTTON_PRESS, он щелкает немного своего состояния.

Теперь давайте поговорим о том, как подключить этот редуктор до сокращения. Прямо сейчас, редуктор - простая функция javascript. Нам просто нужно передать этот магазин в redux с начальным состоянием. [createStore] [1]

P.S. Я обычно пишу код ES2015, так что могут быть небольшие опечатки в импортном синтаксисе CommonJS

var redux = require('redux'); 
var store = redux.createStore(reducer, initialState); 

Следующая часть, чтобы посмотреть на redux-react. Редукс-реакция - это клей, который работает в обе стороны в реакции. Он связывает данные из магазина redux, чтобы реагировать на реквизиты, и он соединяет ответные обратные вызовы (например, щелчок) с действиями сокращения.

Таким образом, концептуально это выглядит так. У вас есть реагирующий компонент с кнопкой. Когда вы нажимаете кнопку, мы хотим сгенерировать действие «BUTTON_PRESS». После этого ваш компонент реагирования больше не заботится о том, что происходит с BUTTON_PRESS. Его работа выполнена. BUTTON_PRESS мог сделать одно из бесконечных вещей. Теперь предположим, что redux-реакция выполняет свою работу и получает действие, переданное редуктору. Редуктор вычисляет свою новую логику и возвращает новое состояние. Это новое состояние имеет значение showMessage. Затем редукция-реакция выполняет вторую половину соединения и делает showMessage опорой для компонента. Чтобы быть ясным, нет явной причины, почему один и тот же реагирующий компонент должен реагировать на состояние, измененное вашим действием. Они могут быть разными компонентами.

Выражаясь в точки пули, вот как codeflow должно работать:

1. Мы создаем начальный магазин с ShowMessage = ложной
2. При создании Реагировать компонента, мы используем connect связать showMessage на опору и обрабатывать onClick кнопки в компоненте для создания действия «BUTTON_PRESS».
3. Поскольку showMessage является ложным, изначально имеется только кнопка.
4. Пользователь нажимает кнопку. Реагировать на вызовы в обработчик onClick
5. Мы используем эффект редукции для отправки события BUTTON_PRESS
6. Когда redux получает действие, он вызывает редуктор с текущим состоянием и действием. Редуктор отвечает за генерацию нового состояния в ответ на это действие
7. редуктор устанавливает ShowMessage истины
8. перевождь реагирует слушает сохранить изменения и когда он изменяет он изменяет опору для реагирования компоненты
9. опоров изменения так реагируют на вызовы render()
   10. Внутри метода визуализации вы видите, что this.props.showMessage верно, поэтому вы отображаете сообщение.

А вот как можно было бы реализовать такой компонент реакции. Есть достаточно различий между компонентами React в ES5 vs ES2015, которые я только что дам вам версию ES2015 и снова извиняюсь.

class HelloWorld extends Component { 
    render() { 
     const message = this.props.showMessage ? "Hello world!" : ""; 
     return (
     <div id="label">{message}</div> 
     <div id="button" onClick={this.props.handleOnClick}>Toggle the message </div> 
     ); 
    } 
} 

HelloWorld.propTypes = { 
    showMessage: PropTypes.bool.isRequired, 
    handleOnClick: PropTypes.func.isRequired, 
}; 

const mapStateToProps = state => ({ 
    showMessage: state.showMessage, 

}); 

const mapDispatchToProps = dispatch => ({ 
    handleOnClick: dispatch({ type: 'BUTTON_PRESS', payload: '' }) 
}); 

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

Вы можете продолжать читать документы, но я надеюсь, что это поможет объяснить все детали. Дайте мне знать, если что-то неясно. [1]: http://redux.js.org/docs/api/createStore.html