How to change the internal state property of a component in an action creator function

Asked
Active3 hr before
Viewed126 times

9 Answers

functioncomponentchangestate
90%

You can use a reducer where you can set initial state of isSending by dispatching a function from the axios api, calling the dispatch function same as above. And you can use that reducer state into your component.,Below is your fetch request, Don't be that account: buying and selling reputation and bounties

Api call

this.props.fetchCategoryRanks(this.props.menu, (response) => {
   if (isRequestStart) {
      this.setState({
         isSending: true
      });
   }
   if (!isRequestStart) {
      this.setState({
         isSending: false
      });
   }
});
load more v
88%

useReducer() comes in handy here. Actions, action object creators and reducers are pure functions. This makes them very unit testable.,In one of my recent projects at HPE, this is what worked for us. Essentially, we have two classes of state:,set the feature context value to contain the reducer state and action dispatch functions.

const [isAuthenticated, setIsAuthenticated] = useState(false)
const initialState = { count: 0 };const reducer = (state, action) => {  switch (action.type) {    case "increment":      return { count: state.count + 1 };    case "decrement":      return { count: state.count - 1 };    default:      throw new Error();  }};const increment = () => ({ type: "increment" });const decrement = () => ({ type: "decrement" });function Counter() {  const [state, dispatch] = useReducer(reducer, initialState);  return (    <>      Count: {state.count}      <button onClick={() => dispatch(increment())}>+</button>      <button onClick={() => dispatch(decrement())}>-</button>    </>  );}
const myPromise = useRef();
const onClick = () => {
   myPromise.current = fetch('/myapi');
}
load more v
72%

dispatch is a function of the Redux store. You call store.dispatch to dispatch an action. This is the only way to trigger a state change.,Redux Doc FAQ: React Redux,Connect: Dispatching Actions with mapDispatchToProps

connect()(MyComponent) // which is equivalent withconnect(null, null)(MyComponent)
// orconnect(mapStateToProps /** no second argument */)(MyComponent)
load more v
65%

import action creator in the file which has our TextInput component and import connect helper from react-redux, import action creator in the file which has our TextInput component and import connect helper from react-redux ,we haven't created a reducer yet and we need one to catch that action and really do something about it.

why action creators? We want to minimize the responsibilities of anyone of our components, We want to make a component as simple and as dumb as possible, so all our compenent is going to do is show the UI. whenever our Component is going to do some logical work we would call the action creator.

Component - > renders the internal components - > need to do some action,
   let 's say handle a button click -
   > calls the action creator -
   > ...
load more v
75%

An action creator that returns a function to perform asynchronous dispatch:,An action creator that returns a function to perform conditional dispatch:,With a plain basic Redux store, you can only do simple synchronous updates by dispatching an action. Middleware extends the store's abilities, and lets you write async logic that interacts with the store.

npm install redux - thunk

yarn add redux - thunk
load more v
40%

Import the action creator functions by name, individually.,Any parent component that renders this one passes it a different prop,Then destructure the props argument inside your component to create a variable with the name of your action creator.

Rename them while importing, then again, while building your actions object:

import {
   doClearQuery as unboundClearQuery
} from './action-creators'

const actions = {
   doClearQuery: unboundClearQuery
}
load more v
22%

So what we want to accommodate is something that looks like a state tree, but where the properties of the state are assigned functions that purely change their state.,The next principle is that the state of the store can only change in one way: through the dispatching of actions. So let’s go ahead and write a dispatcher.,We must protect and stabilize the state of the store. The only way a user should be able to mutate state is through actions.

Pretag
 Pretag team - issue, fix, solve, resolve
60%

Pretag
 Pretag team - issue, fix, solve, resolve
48%

Actions are used to send information from the application to the store. Sending information to the store is needed to change the application state after a user interaction, internal events or API calls.,Learn to style applications using the Foundation framework,Calling actions in the application is easy by using the dispatch method:

Pretag
 Pretag team - issue, fix, solve, resolve

Other "function-component" queries related to "How to change the internal state property of a component in an action creator function"