As a newcomer to React/NextJS with Redux in TypeScript, I have found the Redux setup process to be quite cumbersome. After following common tutorials to create the store, reducers, and actions, I realized that there might be a better way to handle it. In my _app.tsx file, I wired up the Provider component like this:
import { Provider } from 'react-redux'
import store from '@store/store'
function MyApp({ Component, pageProps }: AppProps) {
return (
<Provider store={store}>
<Component {...pageProps} />
</Provider>
)
}
export default MyApp
Then, for connecting state to props and integrating Redux in my index.tsx, I followed this approach:
import { StoreState } from '@store/reducers'
import {
IData1,
IData2,
function1,
function2,
function3,
function4,
function5,
} from '@store/actions'
interface IProps {
data1: IData1[]
data2: IData2
function1: Function
function2: Function
function3: Function
function4: Function
function5: Function
}
const _Home: NextPage<IProps> = (props) => {
const {
data1,
data2,
function1,
function2,
function3,
function4,
function5,
} = props
return (<div>
<SomeComponent fct5={fonction5}
</div>)
}
const mapStateToProps = (
state: StoreState
): { data1: IData1[]; data2: IData2 } => {
return { data1: state.data1, data2: state.data2 }
}
const Home = connect(mapStateToProps, {
function1,
function2,
function3,
function4,
function5,
})(_Home)
export default Home
Although I managed to make it work, I must admit that the process felt overly complex and redundant. Am I missing a more efficient method of achieving the same results? Your insights would be greatly appreciated.
Furthermore, when it comes to utilizing Redux actions or accessing stored data in other components, what approach should I take? Should I repeat the connect wiring for every component or opt for a different strategy such as passing functions and data through component attributes like in the case of function5?