react中,如何src的App.tsx使用src目录下的store文件夹的index.tsx的数据,index中的数据有从store文件夹的reducer文件夹的userReducer数据
时间: 2024-03-12 12:47:23 浏览: 157
要在`App.tsx`中使用`store`中的数据,需要通过`react-redux`库提供的`Provider`组件将`store`传递给整个应用,然后使用`connect`函数将组件与`store`连接起来,可以在该组件的属性中获取`store`中的数据。
具体实现步骤如下:
1. 在`src/index.tsx`中,将`store`传递给整个应用。
```jsx
import { Provider } from 'react-redux';
import store from './store';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
```
2. 在`src/App.tsx`中,使用`connect`函数将组件与`store`连接起来,并在组件的属性中获取`store`中的数据。
```jsx
import { connect } from 'react-redux';
import { UserState } from './store/reducer/userReducer';
interface Props {
user: UserState;
}
function App({ user }: Props) {
return (
<div>
<h1>{user.name}</h1>
<p>{user.age}</p>
</div>
);
}
const mapStateToProps = (state: any) => ({
user: state.user,
});
export default connect(mapStateToProps)(App);
```
在上面的示例中,我们定义了一个`Props`接口,包含了从`store`中获取的`user`数据。在组件中,我们可以通过`props.user`来获取`store`中的`user`数据。`mapStateToProps`函数则是将`store`中的`user`数据映射到组件的属性中,使得组件可以获取到这些数据。
阅读全文