mapStateToProps()
as mapStateToProps()
e mapDispatchToProps()
, é possível usá-las para mapear state
e dispatch
para os props
de um de seus componentes React. O método de connect
do React Redux pode manipular essa tarefa. Esse método usa dois argumentos opcionais, mapStateToProps()
e mapDispatchToProps()
. Eles são opcionais porque você pode ter um componente que precisa apenas acessar o state
mas não precisa despachar nenhuma ação, ou vice-versa. Para usar esse método, passe as funções como argumentos e chame imediatamente o resultado com seu componente. Esta sintaxe é um pouco incomum e se parece com: connect(mapStateToProps, mapDispatchToProps)(MyComponent)
Nota: Se você quiser omitir um dos argumentos para o método connect
, você passa null
em seu lugar. mapStateToProps()
e mapDispatchToProps()
e um novo componente React chamado Presentational
. Conecte esse componente ao Redux com o método connect
do objeto global ReactRedux
e chame-o imediatamente no componente Presentational
. Atribua o resultado a uma nova const
chamada ConnectedComponent
que representa o componente conectado. É isso aí, agora você está conectado ao Redux! Tente alterar um dos argumentos da connect
para null
e observe os resultados do teste. Presentational
deve renderizar.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("Presentational").length === 1; })(), "The Presentational
component should render.");'
- text: O componente Presentational
deve receber uma messages
prop por connect
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find("Presentational").props(); return props.messages === "__INITIAL__STATE__"; })(), "The Presentational
component should receive a prop messages
via connect
.");'
- text: O componente Presentational
deve receber um prop submitNewMessage
via connect
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find("Presentational").props(); return typeof props.submitNewMessage === "function"; })(), "The Presentational
component should receive a prop submitNewMessage
via connect
.");'
```