this view doesn't work with redux, i need use redux dispatch inside react class component, but i get error
"Invalid hook call. Hooks can only be called inside of the body of a
function component. This could happen for one of the following
reasons:
1. You might have mismatching versions of React and the
renderer (such as React DOM)
2. You might be breaking the Rules of
Hooks
3. You might have more than one copy of React in the same
app
See https://reactjs.org/link/invalid-hook-call for tips about how
to debug and fix this problem."
inspectionView.jsx
import React from "react";
import {
Text,
View,
} from "react-native";
import { useSelector, useDispatch } from 'react-redux';
import {
incrementByAmount,
selectCount
} from '../redux/slice.js';
export default class InspectionList extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
dispatch = useDispatch();
count = useSelector(selectCount);
render() {
return (
<View >
<Text>inspection view</Text>
<button
onClick={() => dispatch(incrementByAmount("hello world"))}
>
Add Amount
</button>
<Text>{{count}}</Text>
</View>
);
}
}
Slice.js
import { createSlice } from '@reduxjs/toolkit'
const initialState = {
value: 0,
}
export const counterSlice = createSlice({
name: 'counter',
initialState,
reducers: {
incrementByAmount: (state, action) => {
state.value = action.payload
},
},
})
// Action creators are generated for each case reducer function
export const {incrementByAmount } = counterSlice.actions
export const selectCount = (state) => state.counter.value;
export default counterSlice.reducer
store.js
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './slice'
export const store = configureStore({
reducer: {
counter: counterReducer,
},
})
