How can i fix this case in reactjs with redux?

user_12714445 0
Viewed 60

My screen appears an error is "Expected an assignment or function call and instead saw an expression". Anyone can help me fix this case.I try to fix that but it's not working

import { createSlice , createAsyncThunk } from "@reduxjs/toolkit";

export const getPosts = createAsyncThunk ("posts/getPosts" , 
async (dispatch , getState) => {
    return await fetch('https://jsonplaceholder.typicode.com/posts')
.then(res => res.json())


}
)

 const addPostSlice = createSlice({
    name:'add',
    initialState:{
        posts:[],
        status:false
    },
        
    
    reducers: {},
    extraReducers: {
        [getPosts.pending]:(state ) => {
            state.status = "loading"
        },
        [getPosts.fulfilled]:(state , action) => {
            state.status ="success",
            state.posts = action.payload
        },
        [getPosts.rejected]:(state ) => {
            state.status = "failed"
            
        },
    }



    },
    
 )
const  { reducer} = addPostSlice
export default reducer
redux reactjs
1 Answers

I can't reproduce the error you get. Click Run code snippet below.

<script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/redux@4.1.2/dist/redux.js"></script>
<script src="https://unpkg.com/react-redux@7.2.6/dist/react-redux.js"></script>
<script src="https://unpkg.com/@reduxjs/toolkit@1.7.1"></script>
<script src="https://unpkg.com/react-bootstrap@1.6.1/dist/react-bootstrap.js"></script>
<div id="root"></div>

<script type="text/babel">
const { createSlice, createAsyncThunk } = RTK;

// ================================================================
// ================================================================

const getPosts = createAsyncThunk ("posts/getPosts" , 
async (dispatch , getState) => {
    return await fetch('https://jsonplaceholder.typicode.com/posts')
.then(res => res.json())


}
)

 const addPostSlice = createSlice({
    name:'add',
    initialState:{
        posts:[],
        status:false
    },
        
    
    reducers: {},
    extraReducers: {
        [getPosts.pending]:(state ) => {
            state.status = "loading"
        },
        [getPosts.fulfilled]:(state , action) => {
            state.status ="success",
            state.posts = action.payload
        },
        [getPosts.rejected]:(state ) => {
            state.status = "failed"
            
        },
    }



    },
    
 )

const  { reducer} = addPostSlice

// ================================================================
// ================================================================

const { useEffect } = React;
const { Table } = ReactBootstrap;
const { createStore } = Redux;
const { Provider, connect } = ReactRedux;
const { configureStore } = RTK;

const store = configureStore({
  reducer:{
    addPosts: reducer
  }
});


const mapStateToProps = (state, ownProps) => ({
  posts: state.addPosts.posts
});

const mapDispatchToProps = (dispatch) => {
  return {
    getPosts: () => dispatch(getPosts())
  };
};

const connectToStore = connect(mapStateToProps, mapDispatchToProps);

const Posts = connectToStore((props) => {
  const { posts, getPosts } = props;

  useEffect(() => {
    getPosts();
  }, []);

  return (
    <Table striped bordered hover>
      <thead>
        <tr>
          <th>#</th>
          <th>Title</th>
          <th>Body</th>
          <th>UserId</th>
        </tr>
      </thead>
      <tbody>
        {posts.map((p) => (
          <tr key={p.id}>
            <td>{p.id}</td>
            <td>{p.title}</td>
            <td>{p.body}</td>
            <td>{p.userId}</td>
          </tr>
        ))}
      </tbody>
    </Table>
  );
});

const CounterControl = (props) => {
  return (
    <div>
      <button className="btn btn-success" onClick={props.inc}>
        +
      </button>
      <button className="btn btn-danger" onClick={props.dec}>
        -
      </button>
    </div>
  );
};

const StoreProvider = (props) => {
  return <Provider store={store}>{props.children}</Provider>;
};

const App = () => {
  return (
    <StoreProvider>
      <Posts />
    </StoreProvider>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));
</script>

user_9741860
Related