use-reducer

问题 I have a form with 30 fields and all those fields are a template from a value in a dropdown, if I change the value of the template I will end up creating a custom template. So the action is: When we are changing a value from the form, the template will change in custom template As you can see there are some logic that come up and down and I'm worried about the multiple setState declaration and call. Should I use useReducer or useState ? 回答1: From the useReducer documentation: useReducer is

问题 I tried to set a state using useState inside useEffect with no problem, code as follows: import React, {useState, useEffect} from 'react'; const Banner = () => { const [title, setTitle] = useState([]); useEffect(() => { async function fetchData() { const api = 'some api url'; let response = await fetch(api); response = await response.json(); setTitle(response.title); } fetchData(); }) } export default Banner; Now I'd like to do the same thing but with useReducer, I tried to modify the above

问题 Suppose I implement a simple global loading state like this: // hooks/useLoading.js import React, { createContext, useContext, useReducer } from 'react'; const Context = createContext(); const { Provider } = Context; const initialState = { isLoading: false, }; function reducer(state, action) { switch (action.type) { case 'SET_LOADING_ON': { return { ...state, isLoading: true, }; } case 'SET_LOADING_OFF': { return { ...state, isLoading: false, }; } } } export const actionCreators = {

问题 Suppose I implement a simple global loading state like this: // hooks/useLoading.js import React, { createContext, useContext, useReducer } from 'react'; const Context = createContext(); const { Provider } = Context; const initialState = { isLoading: false, }; function reducer(state, action) { switch (action.type) { case 'SET_LOADING_ON': { return { ...state, isLoading: true, }; } case 'SET_LOADING_OFF': { return { ...state, isLoading: false, }; } } } export const actionCreators = {

问题 Suppose I implement a simple global loading state like this: // hooks/useLoading.js import React, { createContext, useContext, useReducer } from 'react'; const Context = createContext(); const { Provider } = Context; const initialState = { isLoading: false, }; function reducer(state, action) { switch (action.type) { case 'SET_LOADING_ON': { return { ...state, isLoading: true, }; } case 'SET_LOADING_OFF': { return { ...state, isLoading: false, }; } } } export const actionCreators = {

问题 If we see in the doc example: https://reactnavigation.org/docs/auth-flow/ : function SignInScreen() { const [username, setUsername] = React.useState(''); const [password, setPassword] = React.useState(''); const { signIn } = React.useContext(AuthContext); // ???? return ( <View> <TextInput placeholder="Username" value={username} onChangeText={setUsername} /> <TextInput placeholder="Password" value={password} onChangeText={setPassword} secureTextEntry /> <Button title="Sign in" onPress={() =>

问题 I am trying to show a list of Times (e.g. 07:00, 07:30) but when a repeated time appears, show the number of repetitons by its side (e.g. 07:30, 08:00³) As I am looping over a list, each item will need its own state so that the counter can be set and displayed next to each Time At the moment, I am having trouble with too many rerenders, but I am also not sure if my reducer is correct The code without any comments can be seen in this repo: https://github.com/charles7771/decrease-number-wont

问题 I am trying to show a list of Times (e.g. 07:00, 07:30) but when a repeated time appears, show the number of repetitons by its side (e.g. 07:30, 08:00³) As I am looping over a list, each item will need its own state so that the counter can be set and displayed next to each Time At the moment, I am having trouble with too many rerenders, but I am also not sure if my reducer is correct The code without any comments can be seen in this repo: https://github.com/charles7771/decrease-number-wont

问题 I am trying to show a list of Times (e.g. 07:00, 07:30) but when a repeated time appears, show the number of repetitons by its side (e.g. 07:30, 08:00³) As I am looping over a list, each item will need its own state so that the counter can be set and displayed next to each Time At the moment, I am having trouble with too many rerenders, but I am also not sure if my reducer is correct The code without any comments can be seen in this repo: https://github.com/charles7771/decrease-number-wont

问题 I am loading data from a public API after my component is mounted. When the data is loaded I am passing it to the reducer, but it always fires twice. This is what I have: function MyComponent(props) { function reducer(data, action) { switch (action.type) { case 'INITIALIZE': return action.payload; case 'ADD_NEW': const newData = {...data}; newData.info.push({}); return newData; } } const [data, dispatch] = React.useReducer(reducer, null); useEffect(() => { fetch(URL) .then(response => {