UseSelector e UseDispatch: uma informação para ganchos React-Redux

O React Redux fornece um conjunto de ganchos como uma escolha alternativa para a parte de ordem superior join() predominante. Esses ganchos significam que você pode se conectar com o revendedor Redux e despachar ações sem ter que agrupar seus elementos em join().

Esta informação irá implementar os ganchos React-Redux useSelector e useDispatch em seu utilitário.

Mais no programa de software Engenharia 10 idéias de crescimento do iOS para Swift e Xcode

Começando

Comece colocando o próximo em seu aplicativo:

npm set up redux
npm set up react-redux

Os exemplos nesta informação provavelmente se referirão ao meu repositório, acessível aqui .

Aqui está um gif rápido do desempenho do aplicativo:

Existem dois estados separados, um para manter o monitor do contador e outro para manter o monitor de uma pessoa conectada. Podemos ter dados de registros separados para lidar com cada estado.

Crie uma pasta de ações e redutores

Uma pasta de ações e redutores. Imagem: captura de tela

Ações

Vamos começar definindo as ações para o contador em counterActions.js. Algumas estratégias são cruciais: incremento e decremento. Exportaremos essas duas estratégias em um objeto.

const increment = () => {
    return {
        sort: "INCREMENT"
    }
}

const decrement = () => {
    return {
        sort: "DECREMENT"
    }
}

export default {
    increment,
    decrement
}

Da mesma forma, vamos delinear as ações para a pessoa presente em userActions.js , que pode até ter duas estratégias, setUser e logoOut, que provavelmente serão exportadas em um objeto.

const setUser = (userObj) => {
    return {
        sort: "SET_USER",
        payload: userObj
    }
}

const logOut = () => {
    return {
        sort: "LOG_OUT"
    }
}

export default {
    setUser,
    logOut
}

Para ficar organizado, importamos esses dois dados de registros em um único local, o arquivo index.js, dentro da pasta de ações. Criamos uma variável allActions e a definimos como um objeto que compreende as ações importadas que provavelmente serão exportadas.

import counterActions from './counterActions'
import userActions from './userActions'

const allActions = {
    counterActions,
    userActions
}

export default allActions

redutores

Assim como o método usado para a construção do arquivo de ações, criamos uma pasta separada de redutores para transportar a pessoa e os redutores de contador. Vamos começar com o redutor de contador, counter.js.

Uma operação redutora leva em dois argumentos, o estado e o movimento. O estado não deve ser essencialmente definido como um objeto. Nesse caso, o valor padrão do estado é quase um inteiro.

Como descrevemos anteriormente, um movimento retorna um objeto que pode conter duas chaves: sort e, opcionalmente, uma carga útil. Com base principalmente no tipo de movimento, o valor do estado provavelmente será modificado. Lembre-se de que um caso padrão é crítico quando uma classificação de movimento é conhecida, pois não existe para impedir que o aplicativo seja interrompido.

const counter = (state = 1, motion) => {
    swap(motion.sort){
        case "INCREMENT":
            return state + 1
        case "DECREMENT":
            return state - 1
        default: 
            return state
    }
}

export default counter

Para o atual redutor de pessoa, currentUser.js, o estado provavelmente será definido como um objeto vazio que pode conter as chaves pessoa e login. Descubra a distinção no que está sendo retornado entre counter e currentUser. Em todas as circunstâncias, o redutor do contador retorna um número inteiro, pois seu valor inicial era um número inteiro. No caso do redutor de pessoa presente, um objeto é sempre devolvido.

const currentUser = (state = {}, motion) => {
    swap(motion.sort){
        case "SET_USER":
            return {
                ...state,
                person: motion.payload,
                loggedIn: true
            }
        case "LOG_OUT":
            return {
                ...state,
                person: {},
                loggedIn: false
            }
        default:
            return state
    }
}

export default currentUser;

Temos que misturar esses redutores em um. Abaixo de reducers/index.js, vamos importar os dados de registros do redutor além de combineReducers:

import {combineReducers} from 'redux'

import currentUser from './currentUser'
import counter from './counter'
import {combineReducers} from 'redux'

const rootReducer = combineReducers({
    currentUser,
    counter
})

export default rootReducer

Os redutores de mistura fazem o que seu título sugere e combinam os dados de registros do redutor separados em um. Leva em um único argumento: um objeto que contém os dados de registros do redutor. Agora que nossas ações e redutores estão definidos, vamos implementar o Redux em nosso aplicativo.

Implementar Redux

Em nosso index.js abaixo da pasta src, vamos importar o seguinte:

import {Supplier} from 'react-redux';
import {createStore} from 'redux'
import rootReducer from './reducers'

Um varejista Redux provavelmente será criado com a estratégia createStore. Ele recebe dois argumentos, o rootReducer, que é o arquivo que misturou nossos redutores, e a extensão Redux devtools.

import {createStore} from 'redux'
import rootReducer from './reducers'
import {Supplier} from 'react-redux'

const retailer = createStore(
    rootReducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 
)

ReactDOM.render(<Supplier retailer={retailer}><App /></Supplier>, doc.getElementById('root'));

Por fim, envolvemos nossa parte do aplicativo com a parte do provedor do React Redux. A parte do provedor absorverá um suporte, varejista, que provavelmente será definido para o varejista de createStore.

Engenharia de programa de software Grasp Criando uma etapa de construção exclusivamente Npm para JavaScript — a abordagem simples

Implemente useSelector e useDispatch

Importamos os próximos hooks do React Redux: useSelector e useDispatch. Anteriormente, precisávamos importar join() do React Redux e agrupar nossos elementos com ele para poder mapear o estado para props e mapear o dispatch para props.

useSelector

O igual de map state para props é useSelector. Leva em um argumento de operação que retorna a parte do estado que você realmente deseja. Neste caso, temos as próximas chaves do estado descritas: counter e currentUser. Descrevemos isso anteriormente ao combinar redutores.

const counter = useSelector(state => state.counter)
// 1
const currentUser = useSelector(state => state.currentUser)
// {}

Assim, as variáveis ​​counter e currentUser são definidas para o estado definido por seus respectivos redutores.

useDispatch

O igual de despacho de mapa para props é useDispatch. Chamaremos useDispatch e o armazenaremos em uma variável, dispatch. Dispatch funcionará com todas as ações importadas da pasta de ações. Por exemplo, useEffect chama um dispatch com o próximo movimento: allActions.userActions.setUser(person). O consumidor é descrito como:

const person = {title: "Rei"}

Tenha em mente que allActions é um objeto com userActions e counterActions como chaves. Apenas como uma atualização da operação setUser descrita em userActions.js:

const setUser = (userObj) => {
   return {
      sort: "SET_USER",
      payload: userObj
    }
}

setUser retornará um objeto com sort e payload. O Dispatch pegará esse objeto e examinará os redutores que correspondem à classificação de movimento. Neste caso explícito, ele está posicionado em currentUser.js dentro da pasta redutores.

case "SET_USER":
   return {
   ...state,
   person: motion.payload,
   loggedIn: true
}

import React, {useEffect} from 'react';
import {useSelector, useDispatch} from 'react-redux'
import './App.css';
import allActions from './actions'


const App = () => {
  const counter = useSelector(state => state.counter)
  const currentUser = useSelector(state => state.currentUser)

  const dispatch = useDispatch()

  const person = {title: "Rei"}

  useEffect(() => {
    dispatch(allActions.userActions.setUser(person))
  }, [])

  return (
    <div className="App">
      {
        currentUser.loggedIn ? 
        <>
          <h1>Hi there, {currentUser.person.title}</h1>
          <button onClick={() => dispatch(allActions.userActions.logOut())}>Logout</button>
        </> 
        : 
        <>
          <h1>Login</h1>
          <button onClick={() => dispatch(allActions.userActions.setUser(person))}>Login as Rei</button>
        </>
        }
      <h1>Counter: {counter}</h1>
      <button onClick={() => dispatch(allActions.counterActions.increment())}>Improve Counter</button>
      <button onClick={() => dispatch(allActions.counterActions.decrement())}>Lower Counter</button>
    </div>
  );
}

export default App;

E aí está. Os hooks React-Redux useSelector e useDispatch são aplicados dentro do React App. Em comparação com o join() vários, o código é mais limpo e mais organizado.

Obrigado por estudar!